后台管理系统富文本上传的图片在小程序展示会超出页面的问题解决

验证超出屏幕

数据结构

 

解决方法(1:直接在html中使用正则表达式来处理替换<img开头的内容)

<rich-text :nodes="details.content.replace(/\<img/gi, '<img style=\'max-width: 100%;height:auto;display:block;margin-bottom:10px\'')"></rich-text> 

 解决方法(2:在js中采用正则进行处理)

 // const regex = new RegExp('<img', 'gi');
this.contnets=this.details.content.replace(regex, `<img style="max-width:100%;height:auto;display:block;margin-bottom:10px"`)