小程序 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 标签添加自适应样式

完美解决!!

相关推荐
雅致教育4 小时前
基于微信小程序的生签到系统设计与实现
微信小程序·小程序
说私域6 小时前
数字化转型中的开源AI智能客服与S2B2C商城小程序的融合创新
人工智能·小程序·开源·零售
转角羊儿15 小时前
微信小程序—路由
微信小程序·小程序
橘猫云计算机设计1 天前
基于springboot放松音乐在线播放系统(源码+lw+部署文档+讲解),源码可白嫖!
android·java·spring boot·后端·spring·微信小程序·毕业设计
七公子771 天前
微信小程序常见问题记录合集
前端·微信小程序
DreamByte1 天前
Python菜鸟教程(小程序)
开发语言·python·小程序
大叔_爱编程1 天前
wx206基于ssm+vue+uniapp的优购电商小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
凡科网小帆1 天前
宠物店小程序怎么做?助力实体店实现营销突破
小程序·小程序制作·宠物店小程序
T - mars2 天前
python爬虫:小程序逆向实战教程
小程序