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

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

 

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

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

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

Vue使用v-html 片段懒加载其中的图片失效处理
总结:我需要先将里面所有的img src 属性替换成data-src
this.contentHTML=$data.list.contentHTML.replace(/src/g,“data-src”)

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

相关文章:

  • 2022-12-23
  • 2021-09-07
  • 2021-05-20
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-05-09
  • 2022-12-23
  • 2022-12-23
  • 2021-12-16
  • 2022-12-23
  • 2022-02-07
  • 2022-12-23
相关资源
相似解决方案