使用vue-lazyload时，用v-html渲染的富文本内的图片如何实现懒加载？

Question

问题描述

后台返回一串带图片的富文本，用v-html解析后，直接一次性全加载出来了。

问题出现的环境背景及自己尝试过哪些方法

试过在mounted之前遍历，然后替换图片:src为 v-lazy,
这样直接导致图片渲染不出来，看了渲染成功的dom，img有两个属性data，一个是data-set，
把富文本用正则替换如此也是不行（能一次性渲染出来）

黄线上面部分是用正则替换前的富文本，替换后如下。src改成了 data-src，图片直接不显示了

Answer 1

我做过一样的实现，富文本字符串替换v-html渲染，没遇到你说的问题。
把你的代码贴出来吧。

---

回复你的评论：
你觉得没有实现，然而我却实现了。

代码：https://github.com/catscarlet... ，搜function letslazyload。

Demo: https://articles.catscarlet.com/

你不贴代码谁知道你是怎么犯的错。

Answer 2

这是因为v-html里面是全部当作html处理, 不会有vue框架特性的处理, 如v-lay这个directive

所以想使用v-lay的话, 需要把通过正则修改html字符串, 给图片应用v-lay设定, 然后再vue的实例化出来的el挂到对应的位置, 但是缺点是需要加入vue运行时的compiler的依赖

new Vue({
    template: '修改后html的内容'
})

所以建议还是富文本使用其他方式, 拿到html字符串, 转换为dom节点, 遍历修改, 利用intersectionObserver之类的实现appear, disappear事件, appear之后设置图片为真实地址, 图片加载完成就注销appear事件监听器

Answer 3

请问如何解决的呢，我也是用data-src就不显示，但是src可以正常显示，以下是我的正则替换

<script>
    export default{
        name:'richText',
        data(){
            return{
                baseStatic: 'https://XXX.XXX.com',
                details:'<p style="text-align: center;">酒店秉承“开元关怀”服务承诺，始终如一地为宾客“提供东方文化和国际标准完美融合的服务”，给您带来无与伦比的品质和享受。</p><p><br/></p><p><br/></p><p><br/></p>'
            }
        },
        computed:{
            richText(){
                return this.details.replace(new RegExp(/src=\"/g), `style="max-width: 100%; height: auto" " data-src="${this.baseStatic}`);
            }
        },
        methods:{
            
        }
    }
</script>

Answer 4

<div class="trip-left-content" ref="tripContent" v-html="dataObj.content" v-lazy-container="{ selector: 'img' }"></div>



this.dataObj = res.data;
        if (this.dataObj.content) {
          // 创建一个临时 DOM 元素用于处理 HTML 字符串
          const tempElement = document.createElement("div");
          tempElement.innerHTML = this.dataObj.content;
          // 获取所有 img 标签
          const images = tempElement.querySelectorAll("img");
          images.forEach((img) => {
            const src = img.getAttribute("src");
            img.setAttribute("data-src", src);
            img.removeAttribute("src");
          });

          // 将处理后的 HTML 内容赋值回去
          this.dataObj.content = tempElement.innerHTML;
        }

Answer 5

你好 按照你给得方法写的 但是懒加载 我15张图片 第一次加载5张 第二再往下滑10张 一起加载了 能给我解答一下吗