小程序 rich-text 解析富文本 图片过大时如何自适应？_小程序富文本图片适应屏幕

在微信小程序中，用rich-text 解析后端返回的数据，当图片尺寸太大时，会溢出屏幕，导致横向出现滚动

查看富文本代码 图片是用 <img 标签，所以写个正则匹配一下图片标签，手动加上样式即可

  // content 为后端返回的富文本内容
  formatImg(content) {
    if (!content) return '';
    const regex = /<img[^>]*>/g;
    content = content.replace(regex, function (match) {
      return match.replace('>', ' style="max-width:100%;height:auto;">');
    });
    return content;
  },
1
2
3
4
5
6
7
8
9

首先通过正则表达式 /<img[^>]*>/g 匹配所有的 img 标签。然后通过 replace 方法对每个匹配到的 img 标签添加自适应样式

完美解决！！