vue 富文本图片懒加载
Sonder
2020-10-30
499字
1分钟
浏览 (3.6k)
安装插件 :
npm i vue-lazyload -S -D
main.js:
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
富文本内容内使用:
<span v-html="data.content" v-lazy-container="{ selector: 'img' }"></span>
列表使用
<div v-for="(item, index) in list" :key="index" class="icon-item">
<img v-lazy="gg(item.iconUrl)">
</div>
methods: {
// 加图片时间戳的作用是在页面刷新之后使浏览器不使用缓存图片
gg: function (g) {
return g + '?t=' + new Date().getTime()
}
}