取代原生 img 元素，使用 webp！
- 输入 jpg/png，输出 webp（svg/gif 原样返回，不做转换处理）
- 根据浏览器环境自动选择是否使用 webp
- 支持云服务
- 阿里云
- 华为云
- 七牛
- 支持 SSR
yarn add @femessage/v-img<v-img :src="src" width="100" />设置 provider 来使用不同的图片处理方案，provider 参数有以下选项：
- alibaba（默认，同样适用于华为云）
- qiniu
- self
- none
-
默认值为 alibaba。这意味着，只需要上传 jpg/png 到阿里云 OSS，使用 v-img 来显示图片，则会使用阿里云的图片处理服务，根据情况自动返回 webp。如果项目中已使用阿里云 OSS 进行图片存储，则可省略设置
provider -
当
provider=self时，也即图片放到自有主机，一般出现在项目私有化部署的情况，此时需为每一份图片自行准备相应的 webp 文件。 例如:
images/
avatar.png # 原有图片
avatar.png.webp # 需要生成的 webp 文件生成 webp 副本的方法可查看此文。
- 当
provider=none时，仅启用图片懒加载功能
总结一下就是：
- 当
provider=alibaba或qiniu时，使用云服务商图片处理功能，自动转 webp，默认对图片瘦身 - 当
provider=self时，期望用户准备好 webp 文件，判断浏览器环境支持 webp 时，请求 webp 图片 - 当
provider=none时，不对 src 做处理
最好设置一下 width 或 height 属性，不需要带单位(100 而不是 100px)，以便懒加载功能能更好地运行（有一种情况是，如果图片高度为 0，则极有可能导致一次性加载多张图片）。
组件借助了lazysizes来实现懒加载功能，自动开启。
- 把图片优化指南做成一个组件：v-img 介绍
- api
- 设计文档
- webp
- alibaba oss guide
- qiniu images processing doc
- 如何居中缩放 svg 图片
- svg 缩放属性详解
For those who are interested in contributing to this project, such as:
- report a bug
- request new feature
- fix a bug
- implement a new feature
Please refer to our contributing guide.
Thanks goes to these wonderful people (emoji key):
 ColMugX 💻 📖 |  Donald Shen 💻 |  EVILLT 💻 |  Han 💻 🐛 |  Cold Stone 📖 |  levy 📆 🤔 |
This project follows the all-contributors specification. Contributions of any kind welcome!