不用再看图片优化指南啦：v-img 介绍
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 介绍 你是否早就看过所谓的万字长文，上面陈述了各种图片优化技巧，看完之后，你点赞、收藏，然后就下文了？ 你是否早就听说了webp，但考虑到了兼容性，你又老老实实用回了jpg、png？ 你是否在项目中拿到UI切的图片就用，使用 img 元素能显示就行，等项目上线了，才发现图片体积过大、刚打开首屏就发送了几十个图片请求，这时才想到对图片进行压缩、使用懒加载？ 现在，使用 vue 技术栈的同学有福利啦。大家不需要再重复上述操作了，使用 v-img 组件，就可以解决上述烦恼。 你不需要掌握图片优化技巧、下载各种图片压缩工具，也不需要考虑 webp 的兼容性，也不用再去找懒加载的类库，这一切组件都帮你做了。 你继续使用 jpg、png，让组件帮你返回 webp，让图片加载更快，更节省流量，就是这样简单！ 那么，这个组件到底怎么用呢？很简单，就是把代码里的 img 替换成 v-img 就可以了！ 效果展示 说得这么神奇，到底效果如何，我们先来一睹为快。 懒加载 启用webp/使用阿里云OSS服务 启用webp/项目私有化部署 案例分析 下面来看一个项目在引入 v-img 前后的对比。 优化前 在没有使用 v-img 的时候，项目首页的加载情况是这样的： 如图所示， 首屏图片总体积为 947.1 KB，请求数量为 61 个。