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

完美解决!!

相关推荐
郭wes代码3 小时前
Cmd命令大全(万字详细版)
python·算法·小程序
.生产的驴8 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu13 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄14 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净14 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才15 小时前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda716 小时前
随手记:小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光16 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末16 小时前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
oil欧哟1 天前
🤔认真投入一个月做的小程序,能做成什么样子?有人用吗?
前端·vue.js·微信小程序