小程序rich-text 富文本解析图片过大和图片路径的问题
1)图片路径问题
后台产品介绍或者资讯详细里上传图片,比如保存路径是网站的某个文件夹里,一般要用相对路径,比如路径是 /upload/202011/25/20201125001.jpg
小程序用rich-text组件来显示内容,就需要把图片路径前面加上域名等,需要做个替换操作:
wx.request提交给接口参数,比如返回值为res
res.data.content = res.data.content.replace(/src=\"/g, 'src="' + this.data.host);
其中host为data里定义的接口域名地址。
2)图片过大问题
详情里的图片如果不做处理,手机显示就出现显示不全问题,就是图片不能自动适应手机宽度,也需要对图片代码做个处理,用替换方法加上样式:
res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
this.setData({
listDetail:res.data.data
})