小程序 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;
  },

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

在这里插入图片描述
完美解决!!

最近更新

  1. TCP协议是安全的吗?

    2024-04-24 07:08:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-24 07:08:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-24 07:08:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-24 07:08:01       18 阅读

热门阅读

  1. web重点收集

    2024-04-24 07:08:01       40 阅读
  2. 大唐杯模拟题

    2024-04-24 07:08:01       14 阅读
  3. Scala OOP

    2024-04-24 07:08:01       13 阅读
  4. nodejs 中间件

    2024-04-24 07:08:01       16 阅读
  5. 什么是架构?说说我的理解

    2024-04-24 07:08:01       18 阅读
  6. 自己实现httpsession

    2024-04-24 07:08:01       13 阅读
  7. TinyWebServer学习笔记(一):WSL编译运行

    2024-04-24 07:08:01       12 阅读
  8. union节省内存

    2024-04-24 07:08:01       11 阅读
  9. c# ?? 、?.、??=、?[]运算符的使用

    2024-04-24 07:08:01       15 阅读
  10. 【贪心算法】Leetcode 763. 划分字母区间【中等】

    2024-04-24 07:08:01       14 阅读