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

完美解决!!

相关推荐
人还是要有梦想的18 小时前
如何开发微信小程序
微信小程序·小程序·notepad++
inksci1 天前
Js生成安全随机数
前端·微信小程序
azhou的代码园1 天前
基于SpringBoot+微信小程序的图片识别科普系统
spring boot·后端·微信小程序
万岳科技系统开发2 天前
外卖系统选型与源码与 SaaS 实践的思考
数据库·小程序
志遥2 天前
我把 Sentry 接进了 7 端小程序:从异常捕获、Breadcrumb 到 Source Map 定位
微信小程序·监控
云起SAAS2 天前
在线客服系统源码 | 支持PC管理端+H5访客端+实时聊天
微信小程序·ai编程·看广告变现轻·在线客服系统源码
bug总结2 天前
小程序云函数 vs 传统前后端分离(阿里云)原理解析
阿里云·小程序·云计算
2501_933907212 天前
如何通过上海本凡科技获得优质的小程序开发服务?
科技·微信小程序·小程序
计算机徐师兄2 天前
Java基于微信小程序的青少年科普教学系统【附源码、文档说明】
java·微信小程序·青少年科普教学系统小程序·java青少年科普教学小程序·青少年科普教学微信小程序·青少年科普教学小程序·科普教学微信小程序
a17798877122 天前
小程序上传图像失败
小程序·c#