记一次菜鸡的解决拿到数据如果有图片变成[图片]显示问题

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_33755847

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：https://juejin.im/post/5b739dade51d45662434b2be

本文介绍了一种在Vue项目中处理后端返回的包含HTML标签字符串的方法。通过两种不同的方案实现对图片标签的替换：一是利用Vue的ref特性操作DOM；二是使用正则表达式进行字符串替换。最终实现了在页面上以'[图片]...'的形式展示。

1:先展示一下成果

2：有两种思路去解决因为是vue项目也是才开始写vue项目，似乎思路还没有转换过来，一开始的时候采用的ref去处理的后端返回的数据是这样的 str=< p><img ="https://2018/8/15/1653ba3a901850" width="226" height="124" title="img_zuoyeceshi.png"/></p>

2-1：方法1 给父元素添加ref

let exl_examDescP = this.$refs.exl_examDescP;
for(let item of exl_examDescP){
    if(item.firstElementChild.getElementsByTagName("img").length > 0){
        console.log(111);
        item.firstElementChild.append("[图片]...");             
    }
}
复制代码

v-html去编译成html; 但是在vue里mounted里拿不到refs，一直是undefined，后来在updated里面测试的效果是欧克的，但是写在updated里太耗费性能了，就开始思考另外一个方法; 方法二：正则匹配```

let imgReg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi;
for(let item of list){
    item.content = item.content.replace(imgReg, "[图片]...");
}
this.workList = list;
复制代码

在template里v-html=“item.content”，这样就欧克拉。

转载于:https://juejin.im/post/5b739dade51d45662434b2be