WeChat applet rich-text rich text image adaptive processing

1. Description

WeChat applet rich-text tag can display rich text

But for style definition only style and class are supported,

Specifying the img style directly to set the picture style is invalid.

Problem: The width of the img image is too large to handle.

Second, use regular replacement processing, add style attribute to prevent the picture from being too wide

principle:

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

Use regular processing;

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

 

3. Use the system screen width or height to process pictures

      //内容处理
      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
          });
        }
      })

 

 

More:

js to get the src attribute of the image regularly

WeChat applet tab usage and organization

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