一、说明
微信小程序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
});
}
})
更多: