uniapp solves the problem of rich-text rich text pictures being too large

question

As shown in the figure, if the picture is too large, it will exceed the screen of the mobile phone:
Alt

Solution

<rich-text preview image-menu-prevent class="hh" :nodes="content"></rich-text>

onLoad(options) {
    
    
	this.index = options.index
	if(options.detailList) {
    
    
		this.dataList = JSON.parse(decodeURIComponent(options.detailList))
		//解决图片不自动适应的问题 this.dataList.content是富文本展示的数据
	    var richtext=  this.dataList.content;
		const regex = new RegExp('<img', 'gi');
		richtext= richtext.replace(regex, `<img style="max-width: 100%;"`)
		this.content = richtext;
	}
	console.log(this.dataList);
	},
      
.hh {
    
     //解决数字内容太多不换行的问题
	word-break: break-all;
	white-space: pre-warp;
}

Guess you like

Origin blog.csdn.net/weixin_46319117/article/details/127641283