问题描述：

在反显富文本的图片时候会存在以下问题：
1、富文本图片太大的时候，会溢出无法自适应；
2、统一给img样式的时候，由于css的优先级原因会存在失效的情况；

解决思路：

富文本的本质就是字符串，所以只需要全局替换富文本中字符串中含有img标签，同时在img标签上加上相应的行内样式，样式可根据具体的需求和设计稿进行编写；

步骤分别是：
  • 1.去掉img标签里的style、width、height属性
  • 2.img标签添加style属性：max-width:100%;height:auto
  • 3.修改所有style里的width属性为max-width:100%
  • 4.去掉br标签

示例代码：

vue template:（这边增加一个&&的容错，防止有replace的报错）

1
2
3
4
<div
    class="txt"
    v-html="news.resourceContext && imgTagAddStyle(news.resourceContext)"
></div>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
methods: {
    imgTagAddStyle (htmlstr) {
      let newContent = htmlstr.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
        return match
      })
      newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;')
        return match
      })
      newContent = newContent.replace(/<br[^>]*\/>/gi, '')
      // eslint-disable-next-line no-useless-escape
      newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:8px 0;"')
      return newContent
    }
  }
...