vue v-html 富文本图片附件前图标显示问题

vue v-html 富文本图片溢出，解决图片溢出问题之后会出现附件的图片也是100%显示

如图所示：附件前面的图片也是100%

解决方案：给富文本中所有图片增加 class 

富文本

JavaScript

handleHtml(rich) {
  //使用正则表达式匹配所有图片
  let reg = RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g);
  let match = rich.match(reg);
  
  if (match) {
    //循环图片数组
    for (let i = 0; i < match.length; i++) {
      const item = match[i];
      //根据判断条件添加不同class
      if (item.includes("title=")) {
        let len = item.length;
        let _str = item.slice(0, len - 2) + " class=\"l-img\"/>";//追加 class 之后的img
        rich = rich.replace(item, _str);
      } else {
        let len = item.length;
        let _str = item.slice(0, len - 2) + " class=\"l-file-img\"/>";//追加 class 之后的img
        rich = rich.replace(item, _str);
      }
    }
  }
  console.log("处理之后", rich);
  return rich;
}

scss

<style lang="scss" scoped>
.rich-box {
  background-color: #ffffff;

  ::v-deep {
    .l-img {
      max-width: 100%;
    }
  }
}
</style>

最终效果：

注：可以根据自己的判断条件增加不同的 class，具体根据项目去处理