Vue图片优化指南啦：v-img 介绍

用户9914333

发布于 2022-07-21 19:23:03

8450

发布于 2022-07-21 19:23:03

文章被收录于专栏：bug收集bug收集

介绍你是否早就看过所谓的万字长文，上面陈述了各种图片优化技巧，看完之后，你点赞、收藏，然后就下文了？

你是否早就听说了webp，但考虑到了兼容性，你又老老实实用回了jpg、png？你是否在项目中拿到UI切的图片就用，使用 img 元素能显示就行，等项目上线了，才发现图片体积过大、刚打开首屏就发送了几十个图片请求，这时才想到对图片进行压缩、使用懒加载？

现在，使用 vue 技术栈的同学有福利啦。大家不需要再重复上述操作了，使用 v-img 组件，就可以解决上述烦恼。

你不需要掌握图片优化技巧、下载各种图片压缩工具，也不需要考虑 webp 的兼容性，也不用再去找懒加载的类库，这一切组件都帮你做了。你继续使用 jpg、png，让组件帮你返回 webp，让图片加载更快，更节省流量，就是这样简单！

那么，这个组件到底怎么用呢？很简单，就是把代码里的 img 替换成 v-img 就可以了！ 使用方法 安装插件

// 默认全局配置
Vue.use(VueImg)
// 自定义全局配置
Vue.use(VueImg, {
  loading: '',
  error: '',
  prefix: '',
  quality: 100,
  adapt: true,
  delay: 2000, // 单位ms,
  cdn: 'qiniu' // 选择要使用的 CDN 服务提供商，目前仅支持 `ali` 和 `qiniu`，默认为 'qiniu'
})

使用指令 基本用法

由于 Vue 2 删除了指令中的 params，故采用 object value 的形式传入参数

<!-- 设置图片 + 默认参数 -->
<img v-img="'xxx'">
<!-- 设置图片 + 自定义参数 -->
<img v-img="{ hash: 'xxx', width: 233, height: 666, defer: true, adapt: false }">
<!-- 设置背景 + 默认参数 -->
<div v-img="'xxx'"></div>
<!-- 设置背景 + 自定义参数 -->
<div v-img="{ hash: 'xxx', width: 12, height: 450 }"></div>

可读属性 VueImg 提供了一些属性，可用于指令以外的场合。你应当视它们为只读属性，避免直接修改。

VueImg.cdn             // [String]   当前环境所使用的 CDN 的域名，例如 http://cube.elemecdn.com
VueImg.cdnProvider     // [String]   当前环境所使用的 CDN 服务提供商，目前仅支持 `ali` 和 `qiniu`，默认为 'qiniu'。
VueImg.canWebp         // [Boolean]  当前环境是否支持 webP
VueImg.getSrc({ ... }) // [Function] 获取图片地址

参考： https://segmentfault.com/a/1190000021421981#item-5 https://www.npmjs.com/package/vue-img

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-04-12，如有侵权请联系 cloudcommunity@tencent.com 删除

https