img

vue 富文本图片懒加载

2020-10-30 0条评论 2.9k次阅读 JavaScript


安装插件 :

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()
           }
        }

💬 COMMENT


🦄 支持markdown语法

👋友