uniapp小程序中富文本内容渲染图片不展示的问题
文章目录
- 1.从后端请求的数据中图片是这样的
- 2.前端我是用Uview中的u-parse组件
- 3.这样修改去掉富文本中的所有反斜杠
- 4.完美解决
1.从后端请求的数据中图片是这样的
<p><img src=\\\"https://zhangsanfengcode.cn:8084/images/2024-06-28a257befe.jpg\\\" alt=\\\"\\\" data-href=\\\"\\\" style=\\\"\\\"/></p>
2.前端我是用Uview中的u-parse组件
展示效果是这样的，文字部分正常显示，图片展示报500
定位错误后发现，
<img src=\“https://zhangsanfengcode.cn:8084/images/2024-06-28a257befe.jpg\” alt=\“\” data-href=\“\” style=\“\”/>
这样有‘\’用富文本展示就会有问题
3.这样修改去掉富文本中的所有反斜杠
在JavaScript中，如果你想要去掉字符串中所有的反斜杠（\），你可以使用String.prototype.replace()方法。这个方法可以接受一个正则表达式作为匹配模式，然后将匹配到的内容替换为指定的字符串。
在你的例子中，你可以这样做：
let str = `<p><img src=https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%5C%22https%3A%2F%2Fzhangsanfengcode.cn%3A8084%2Fimages%2F2024-06-28a257befe.jpg%5C%22&pos_id=img-939zOBej-1722052072318) alt=\"\" data-href=\"\" style=\"\"/></p><p><img src=https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%5C%22https%3A%2F%2Fzhangsanfengcode.cn%3A8084%2Fimages%2F2024-06-28f7963fe1.jpg%5C%22&pos_id=img-P3Ca48AA-1722052073039) alt=\"\" data-href=\"\" style=\"\"/></p>`; // 使用正则表达式替换所有的反斜杠
let newStr = str.replace(/\\/g, ''); console.log(newStr);
然后我是这样做的
this.art_detail = res.data.art[0].art_detail.replace(/\\/g, '');
4.完美解决
