Vue使用v-html 懒加载其中的图片
Vue使用v-html 懒加载其中的图片
本人做的项目类似于淘宝的商城,我是二次开发也是最近才开始学习vue的小白,遇到这种问题记录一下方便以后再次巩固。
在商品详情页面有一连串的图片,从后台接口获取的是一个地址 页面也就是直接把地址放进了v-html中进行渲染。
布局页面
逻辑
页面效果
需要进行对图片懒加载 因为传过来的是一个字符串的页面 下面这种
我需要先将里面所有的img src 属性替换成data-src
response.data=response.data.replace(/src/g,“data-src”)
然后再在你的v-html标签加一个v-lazy-container="{ selector: ‘img’ }"就可以实现v-lazy懒加载了