vue如何将图片转换为webp并前端展示

news2024/11/19 7:24:48

1. 首先把图片转换为webp格式

1.1 可以进入cmd后,pip安装pillow

pip install  Pillow --trusted-host mirrors.cloud.tencent.com

1.2 save为webp格式,即可得到webp格式图片

...
from PIL import Image
img = Image.open('background1.jpeg').convert('RGB')
img.save('background3.jpeg.webp', 'webp')

2. 前端展示:

2.1 vue-cli读取webp文件需要在webpage配置文件里新增file-loader项

我的配置文件在build目录下的webpack.base.conf.js

    rules: [  
    ......
      {
        test: /\.webp$/i,
        use:['file-loader']
      },
    ......
    ]

2.2 <img>标签无法src到webp文件,需要用<div>+background-image

          <div id="imgMain1"
          :style="{ height: Height + 'px' }"
          style="width:100%;"></div>  
  background-image: url('../../assets/background1jpeg.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%

需要注意的是 对于background-image 的div的要指定元素高度

由于 background-image是背景图片,是css的一个样式,不占位,元素的背景图片填充元素的大小,属于被动填充,若元素大小没指定,那默认为0;
<img />是一个块状元素,它是一个图片,是html的一个标签,占位,图片的大小决定元素的大小,属于主动填充,所以有时img无需指定高宽。

所以对于外面的div盒子必须要指定高度 否则div撑不起来会变成heigh为0的元素

另外有时webp图片比jpeg格式更大,还不如不转占空间小

见https://www.cnblogs.com/Pickcle/p/6247740.html

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/492265.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

干货分享|一款让企业知识管理变得简单高效的工具软件

互联网发展到下半场&#xff0c;很多企业都开始进行数字化转型&#xff0c;在这个过程中&#xff0c;很多企业都忽视了极为重要的一点——企业的知识管理。如今信息化的时代&#xff0c;可以说企业的知识管理是引领企业数字化转型、进行创新的关键。 企业知识管理的实质就是对…

后端Springboot框架搭建APi接口开发(第三章末)

前两章节讲述了如何通过APi接口实现对数据库的查询操作 这章主要讲述&#xff0c;Stringboot对数据库数据的查询、新增、修改、删除操作 第一节&#xff1a;数据库查询 首先编写UserMapper.xml。定义SQl语句 文件结构&#xff1a;demo\src\main\java\com\example\demo\mapp…

蓝牙耳机什么牌子的好用?测评员分享目前最值得入手的蓝牙耳机

蓝牙耳机的出现让我们日常生活更加便利&#xff0c;与有线耳机相比少了束缚&#xff0c;而随着蓝牙耳机市场的成熟&#xff0c;涌现了超多品牌&#xff0c;让大家不知道蓝牙耳机什么牌子的好用&#xff0c;我这几年已经测评过50多款蓝牙耳机&#xff0c;今天将要分享目前最值得…

【类和对象】(上)

系列文章目录 文章目录 系列文章目录&#x1f451; 前言&#x1f451; 一、什么是类&#xff0c;什么是对象&#x1f451; 二、类的引入&#x1f451; 三、类的定义&#x1f451;三、1.类的两种定义方式&#xff1a; &#x1f451; 四、类的内存计算&#x1f451;五、this指针&…

Flutter学习之旅 - 页面布局Padding、Column、Flex、Expanded

文章目录 Padding线性布局组件(Column和Row)水平布局组件(Row)垂直布局组件(Column) 弹性布局(Flex&Expanded)ExpandedFlex 达到父元素的尺寸 Padding class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);overrideWidget build(…

ATA-2000系列高压放大器介绍

ATA-2000系列是一款理想的可放大交、直流信号的高压放大器。最大差分输出1600Vp-p(800Vp)高压&#xff0c;可以驱动高压型负载。电压增益数控可调&#xff0c;一键保存常用设置&#xff0c;为您提供了方便简洁的操作选择&#xff0c;同时双通道高压放大器输出还可同步调节&…

FastJson序列化导致的 “$ref“

前言&#xff1a; 刚转后端没多久&#xff0c;在通过RPC调用其他组的服务的时候&#xff0c;其他组对接的同学说&#xff0c;你的入参是有问题的&#xff0c;然后他把入参发我&#xff0c;类似于下面的 json&#xff1a; {"addressMO": {"roomNumber": &…

795. 前缀和(C++和Python3)——2023.5.5打卡

文章目录 QuestionIdeasCode Question 输入一个长度为 n 的整数序列。 接下来再输入 m 个询问&#xff0c;每个询问输入一对 l,r 。 对于每个询问&#xff0c;输出原序列中从第 l 个数到第 r 个数的和。 输入格式 第一行包含两个整数 n 和 m 。 第二行包含 n 个整数&#…

哪种类型蓝牙耳机佩戴最舒服?公认佩戴舒适度高的蓝牙耳机

随着都市人生活水准的提高&#xff0c;人们开始享受起生活&#xff0c;观察身边的事物&#xff0c;佩戴蓝牙耳机能够满足自身基本通勤需求&#xff0c;现阶段不少蓝牙耳机质量越来越好&#xff0c;并且在功能、体验、技术上都具有相当的优势&#xff0c;性价比极高&#xff0c;…

Window下的反弹shell

什么是正向shell? 正向shell&#xff1a;控制端主动发起连接请求去连接被控制端&#xff0c;中间网络链路不存在阻碍。 反向shell&#xff1a;被控制端主动发起连接去请求连接控制&#xff0c;通常被控端由于防火墙受限制、权限不足、端口被占用等问题导致被控端不能正常接收…

短视频矩阵管理营销系统.源代码

一、短视频矩阵系统一般拥有以下几个主要功能&#xff1a; 1. 视频拍摄和剪辑功能&#xff0c;让用户轻松制作和发布短视频内容。 2. 视频分发和推广功能&#xff0c;矩阵管理发布、将制作好的短视频内容推送到各大短视频平台&#xff0c;实现效果最大化。 3. 数据监测和分析…

计算机三级嵌入式系统开发 知识点笔记

目录为搜索词&#xff0c;详情看每一节后图片 思维导图已上传&#xff0c;点击这里下载 嵌入式系统开发 全部章节图片第一章 嵌入式系统概论1.1SoCIP核 1.21.2.1ASCIIGB2312GB18030UTF8UTF16超文本字符形状两种描述方法 1.2.2数字图像 1.2.3音频 1.3传输介质分为 有线通信 和 无…

Windows下安装MySQL数据库+Navicat (从完全卸载到安装使用图文详细步骤,附安装包)

目录 第一章&#xff1a;如何完全卸载干净mysql教程&#xff08;三个步骤完全卸载&#xff09;1&#xff09;步骤一&#xff1a;卸载程序2&#xff09;步骤二&#xff1a;删除文件3&#xff09;步骤三&#xff1a;删除注册表信息 第二章&#xff1a;下载软件两种方式1&#xff…

架构师日记-深入理解软件设计模式 | 京东云技术团队

作者&#xff1a;京东零售 刘慧卿 一 设计模式与编程语言 1.1 什么是设计模式 设计模式&#xff08;Design pattern&#xff09; &#xff1a;由软件开发人员在软件开发中面临常见问题的解决方案&#xff0c;是经过长时间的试验积累总结出来的&#xff0c;它使设计更加灵活和…

MyBatis详细笔记

核心知识点 核心配置文件 映射文件概述 Dao层实现与代理开发实现 自动映射与自定义映射 参数传递与返回值 动态SQL 注解开发 缓存机制 总结 核心配置文件【mybatis-config.xml】 MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置和属性信息。 位置&#xff1a;resourc…

前端配置化表单组件设计方法 | 京东云技术团队

一、背景 前端开发中涉及表单的页面非常多&#xff0c;看似功能简单&#xff0c;开发快速&#xff0c;实则占去了很大一部分时间。当某个表单包含元素过多时还会导致html代码过多&#xff0c;vue文件过大。从而不容易查找、修改和维护。为了提高开发效率及降低维护成本&#x…

基于max30102的物联网病房监测系统(中断处理和主题逻辑)

目录 五、中断处理 六、主体框架 对采集数据的初始化 核心功能的实现 烟雾 通信帧格式 wifi接收数据的处理 OLED显示 五、中断处理 void SysTick_Handler(void) {TimingDelay_Decrement(); }void ESP8266_USART_INT_FUN(void) {uint8_t ucCh;if ( USART_GetITStatus (…

platform总线五级匹配解析

代码来源&#xff1a;开源linux内核linux-6.2.9 platform总线设备与驱动的匹配 对于device和driver无论哪个创建都会尝试主动寻找对方进行绑定&#xff0c;而platform bus总线的匹配原则如上面的代码所示&#xff0c;共有五级匹配&#xff0c;这里进行详细解析下&#xff1a; …

WRF模式

随着生态文明建设和“碳中和”战略的持续推进&#xff0c;我国及全球气候变化及应对是政府、科学界及商业界关注的焦点。气候是多个领域&#xff08;生态、水资源、风资源及碳中和等问题&#xff09;的主要驱动因素&#xff0c;合理认知气候变化有利于解释生态环境变化机理及过…

Android应用层开发学习 Framework 是必须的吗?

作为一名应用层 App 开发工程师&#xff0c;我们为什么要学习 Android Framework&#xff1f;答案很简单&#xff0c;为了不被淘汰&#xff01;在 2023 年的当下,不会点 Binder WMS AMS PMS 好像都找不到工作了&#xff0c;更过分的是应聘企业甚至希望你会点 RN Fluter 等跨平台…