uni-app小程序图片v-html自适应问题

前言

用v-html渲染富文本框，发现小程序图片没有办法自适应
采用css去修改，发现不生效

img{
	width: 750upx!important;
}

解决办法

uni的v-html转换成小程序是rich-text标签，则我们直接使用rich-text来实现富文本的渲染

<rich-text :nodes="details.newsConten | filtersRichText"></rich-text>

我们使用过滤器来把img的标签拿出来，在放css样式

filters: {
	filtersRichText(html) { //控制小程序中图片大小
		let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		});
		newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			return match;
		});
		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		newContent = newContent.replace(/\<img/gi,
			'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
		return newContent;
	}
},

效果展示

补充

如果图片想展示自定义样式，那么我们可以不添加style，而改用class，在我们的css中加上class样式也可以