Vue使用v-html 片段懒加载其中的图片失效处理

在热文详情页面有一连串的图片,从后台接口获取的是一个地址 页面也就是直接把地址放进了v-html中进行渲染。

Vue使用v-html 片段懒加载其中的图片失效处理_第1张图片

 

单纯上面的写法图片实现,图片加载不出来;解决办法如下所示


总结:我需要先将里面所有的img src 属性替换成data-src
this.contentHTML=$data.list.contentHTML.replace(/src/g,“data-src”)

后再在你的v-html标签加一个v-lazy-container="{ selector: ‘img’ }"就可以实现v-lazy懒加载了

你可能感兴趣的:(Vue使用v-html 片段懒加载其中的图片失效处理)