首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

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()
           }
        }
下一篇 / PHP 获取每日BING图 并且缓存URL链接到本地JSON

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)