移动端h5踩坑之 显示富文本内容设置图片宽度

Posted 2023-05-11

参考技术A 例子是在vue的项目中，如果你去当前页面的有 scope 属性的 style 里面设置img的宽度，尽管设置为 !important 还是不起作用，img还是按照自身行内属性显示了大小；

或者在单独的css文件里写也可以。

富文本内容里的图片放在h5适应（大于边框的宽度/300的宽度适应，其余不变，样式取消掉）

if(richContent != null){
        let index = 0 //width= 第一次出现的位置
        let index2 = 0 // 宽度值结尾下标
        let str = \'\' //截图width=  之后的内容
        let widths = 0
        let img = \'\'
        if(richContent.indexOf(/<img¹*>/gi) >= 0){
          richContent= richContent.replace(/<img¹*>/gi,function(match,capture){
            img = JSON.parse(JSON.stringify(match))
            index = img.indexOf(\'width=\')
            str = img.substring(index+6,img.length)
            index2 = str.indexOf(\'"\',1)
            widths=str.substring(1,index2)
            if(widths>300){
              match = match.replace(/style="²+"/gi, \'\').replace(/style=\'³+\'/gi, \'\');
              match = match.replace(/fnref-2">2+"/gi, \'\').replace(/width=\'³+\'/gi, \'\');
              match = match.replace(/fnref-2">2+"/gi, \'\').replace(/height=\'³+\'/gi, \'\');
              return match;
            }else{
              return match;
            }
          });
          if(widths>300){
            richContent = richContent.replace(/style="²+"/gi,function(match,capture){
              match = match.replace(/width:⁴+;/gi, \'max-width:100%;\').replace(/width:⁴+;/gi, \'max-width:100%;\');
              return match;
            });
            richContent = richContent.replace(/<br¹*/>/gi, \'\');
            richContent = richContent.replace(/\\<img/gi, \'<img style="max-width:100%;margin:0 auto;display:inline-block"\');  
          }else{
            return match;
          }
        }
        this.richContent = richContent;
      }else{
        this.richContent = \'\'
      }

---

1. > ↩
2. " ↩
3. \' ↩
4. ; ↩