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

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

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

javascript 复制代码
  // 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;
  },

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

完美解决!!

相关推荐
白臻2 小时前
微信开放能力 微信小程序获取微信头像、昵称、转发功能、分享到朋友圈、手机号验证组件、客服功能等
微信·微信小程序·小程序
六月的雨__2 小时前
跑腿平台小程序的设计
java·sql·学习·小程序
樱桃大丸zei໌2 小时前
微信小程序留言板2
微信小程序·小程序
阿亮说技术5 小时前
Java毕业设计 基于SSM vue电影院票务系统小程序 微信小程序
java·微信小程序·毕业设计·课程设计
2401_845937535 小时前
Java外卖微信小程序京东拼多多外卖cps|外卖红包优惠券
微信·微信小程序·小程序·微信公众平台·微信开放平台
天空原海6 小时前
微信小程序 调色板
微信小程序·小程序
六月的雨__8 小时前
二手物品交易小程序的设计
java·sql·学习·小程序
彭世瑜9 小时前
微信小程序/uniapp:class和style不生效的问题
微信小程序·小程序·uni-app
缘月叙文9 小时前
uniapp+vue3+echarts编写微信小程序
微信小程序·uni-app·echarts
革斤要加油17 小时前
C++系统编程篇——Linux第一个小程序--进度条
linux·c++·小程序