A method to solve the self-adaptive width and height of the internal picture of rich text label in wechat applet

rich-text Rich text labels

rich-text It is the rich text tag of wechat applet , In the use of rich-text When , need rich-text Adaptive width and height of internal picture , What to do at this time ？ Let's take a look at the case first ：

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

programme

There's a rich-text Rich text in wxml Examples of use in , At this time, we need to set it content Parameters ,content Is a rich text content , stay js This can be set in ：

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
	});
}

explain

It's on it rich-text How to set rich text content , If the content has not been replace If you replace , The picture will be out of screen , Want to achieve rich-text Internal picture adaptation , You need to put the label style Add to properties “width:100%;height:auto” ( Width 100%, Highly adaptive , That is, the original scale of the picture will be maintained ).