解决微信小程序rich-text富文本标签内部图片宽高自适应的方法

rich-text富文本标签

rich-text是微信小程序的富文本标签，在使用rich-text的时候，需要rich-text内部图片宽高自适应，这个时候该怎么做呢？先来看下案例：

<view class="contentLine">
    <rich-text nodes="{
    {content}}"></rich-text>
</view>

方案

上面是一个rich-text富文本在wxml中的使用示例，这个时候我们需要给它设置content参数，content就是一个富文本内容，在js中可以这样设置：

onLoad: function (options) {
    
	var mycontent = "<img src='https://www.tpyyes.com/cat.jpg'/>";
	mycontent = mycontent.replace(/\<img/gi, '<img style="width:100%;height:auto"');
	this.setData({
    
	  content: mycontent
	});
}

说明

上面是rich-text设置富文本内容的方法，如果内容没有经过replace替换的话，图片会超出屏幕范围，想要实现rich-text内部图片自适应，就需要把标签的style属性中加入“width:100%;height:auto” (宽度100%，高度自适应，也就是会保持图片的原始比例)。