小程序

小程序rich-text 富文本解析图片过大和图片路径的问题

2020-11-25

小程序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

})


客户案例

关注公众号

小程序