vue开发常见问题集锦（一）——在v-html指令时如何使用过滤器

canyuegongzi

于 2019-03-31 20:39:29 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： vue JS

本文链接：https://blog.youkuaiyun.com/qq_37262037/article/details/88934971

JS 同时被 2 个专栏收录

26 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

本文介绍了一种在Vue中处理图片路径的方法，通过自定义过滤器实现图片源地址的动态替换，解决了v-html绑定HTML内容时样式不继承的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// html 
<div class="word" v-html="$options.filters.filters2(item.news_content)"></div>

// script
filters: {
      filters2: function (arg) {
        arg.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
          arg = arg.replace(new RegExp(capture, 'g'), baseImgUrl + capture);
        });
        return arg;
      }
}