微信小程序显示富文本内容图片溢出设置样式

最新推荐文章于 2024-07-09 15:53:12 发布

浮桥

最新推荐文章于 2024-07-09 15:53:12 发布

阅读量901

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_44801790/article/details/131064138

版权

文章描述了一种针对微信小程序显示PC端富文本内容时图片超出手机屏幕的问题解决方案。通过使用JavaScript正则表达式，动态给img标签添加样式，确保图片宽度100%且高度自适应，从而避免溢出问题。

摘要由CSDN通过智能技术生成

微信小程序显示PC端配置的富文本内容时，图片溢出手机屏幕，设置样式不成功。
解决办法：使用js给每个img图片标签添加样式style。

	  // str是富文本数据
      var newHtml = str.replace(/(<img\s+.*?style=")(.*?)(".*?>)/g, function (match, p1, p2, p3) {
        var newStyle = 'width:100%;height:auto;';
        return p1 + newStyle + p3;
      });
      str.remark = newHtml //替换