在使用v-html渲染富文本时遇到图片显示不出的问题

问题描述：

通过v-html=""渲染从后端拿到的一段富文本，结果发现图片在正文中显示不出来，于是查看dom结构发现：

(如果图片显示不出来见下面所写示例)
就是图img标签中间添加了正文内容，导致了图片显示不出
<img src="https: mmbiz.qpic.cn="" mmbiz_png="" 3qdxlnyewk2iapfy6vfukjafkfvm7ouutf03gtfzgoctnich1qlgfb2lot8bnnfwi9xicgr3cp6fjcl6ick0kibva="" 640?wx_fmt="png" ">
　　此外，普惠制主要针对进出口贸易，而最惠国待遇包括缔约国双方在通商、航海、关税、法律地位等多方面的优惠、特权或豁免待遇，它比普惠制的适用范围更加广泛。

</img src="https:>

这该怎么解决呢？

答

后端传回这个肯定能正常显示的，看截图是src的属性值闭合有问题。感觉还是后端有问题或者题主做了什么处理，导致标签不闭合了

<meta charset="utf-8" />
<div id="app">
    <div v-html="s"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: { left: 0, top: 0, s:`<IMAGE SRC="https://mmbiz.qpic.cn/mmbiz_png/3QdXlNYeWk2IaPfy6VFukjaFKFVm7ouUTf03gtFzgOCtNicH1QlgfB2loT8bnNFWI9XicGr3Cp6FJCL6icK0kIBvA/640?wx_fmt=png\" >\r\n　　法律地位等多方面的优惠、特权或豁免待遇，它比普惠制的适用范围更加广泛。\r\n<IMAGE SRC="https://mmbiz.qpic.cn/mmbiz_png/3QdXlNYeWk2IaPfy6VFukjaFKFVm7ouUjsBALpr5T5qxh9KokajjXED86SEPiaYhEpATxm2tYU2LQeb8XtjJXMw/640?wx_fmt=png\" >\r\n　　上海洋山深水港集装箱码头。计海新摄（中经视觉）\r\n　　现实中，发达国家之所以对发展中国家设从发定程度甚至是没有了，它们自然就会取消普惠制待遇。\r\n　　标志着中国在世界贸易的赶考中“毕业”了。\r\n`},
       
    })
</script>

答

...这种情况不怼后端，还想着自己解决吗

这种无规则的结构，随时有可能变化，前端是处理不了的

答

v-html="data"
你可以先看一下data数据是不是和渲染出来的这个文档一样的，如果是一样的那就是这个data在富文本编辑保存的时候就有问题了。
你得去查下这个data来源有没有传错，一般情况下的富文本数据不会这样。

在使用v-html渲染富文本时遇到图片显示不出的问题

相关推荐