微信小程序rich-text富文本图片自适应处理

最新推荐文章于 2024-04-23 16:54:19 发布

weixin_34345753

最新推荐文章于 2024-04-23 16:54:19 发布

阅读量2.9k

点赞数 1

文章标签： python 后端

原文链接：https://my.oschina.net/tianma3798/blog/1796942

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、说明

微信小程序rich-text标签可以显示富文本

但是对于样式定义仅支持style和class，

直接指定img样式设置图片样式无效。

问题：对于img图片宽度太大超出处理。

二、使用正则替换处理，添加style属性防止图片太宽

原理：

content.replace('<img', '<img style="max-width:100%;height:auto" ') //防止富文本图片过大

使用正则处理；

 data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')

三、使用系统屏幕宽度，或高度处理图片

      //内容处理
      wx.getSystemInfo({
        success: function(res) {
          data.content = data.content.replace(/\<img/g, '<img style="width:'+res.windowWidth+'px;height:auto;display:block;margin-left:-10px;margin-right:-10px;"');
          _this.setData({
            entity: data,
            id: id,
            imgMinList: data.imglist,
            paramlist: data.paramlist
          });
        }
      })

js正则获取图片的src属性

微信小程序tab使用整理

http://www.jnqianle.cn/problem/

转载于:https://my.oschina.net/tianma3798/blog/1796942