Sample code for the problem of image width display in uniapp in WeChat applet

In uniapp, if your rich text image display width is not normal, you can solve this problem by setting the image's width and height attribute. For example, you can add the following code to rich text to set the width of the image to 100%:

<img src="your_image_url" />

Also, if you want to set the height of the image, you can add the following code:

<img src="your_image_url" />

Of course, a filter can be implemented to automatically process the image width.

export default {
    // ...
    filters: {
        formatRichHtml(html) {
            if (!html) {
                return html;
            }
            //Control the size of the picture in the applet            let newContent = (/&lt;img[^&gt;]*&gt;/gi, function (match, capture) {
                ((/style=/gi));
                if ((/style=/gi) === -1) {
                    match = (/\&lt;img/gi, '&lt;img style=""');
                }
                return match;
            });
            newContent = (/style="/gi, '$&amp; max-width:100% !important; ');
            newContent = (/&lt;br[^&gt;]*\/&gt;/gi, '');
            return newContent;
        }
    }
    // ...
}

When calling, you only need to call as follows

export default {
    // ...
    filters: {
        formatRichHtml(html) {
            if (!html) {
                return html;
            }
            //Control the size of the picture in the applet            let newContent = (/&lt;img[^&gt;]*&gt;/gi, function (match, capture) {
                ((/style=/gi));
                if ((/style=/gi) === -1) {
                    match = (/\&lt;img/gi, '&lt;img style=""');
                }
                return match;
            });
            newContent = (/style="/gi, '$&amp; max-width:100% !important; ');
            newContent = (/&lt;br[^&gt;]*\/&gt;/gi, '');
            return newContent;
        }
    }
    // ...
}

When calling, just call as follows

<rich-text :nodes="xxxxxContent | formatRichHtml" />

Supplement: uni-app rich-text image adaptive processing

New public-

imgDeal(str){
  return (/\<img/gi, '<img style="width:100%;height:auto;display:block;"');
}

<rich-text :nodes="content"></rich-text>

=(content);

This is the article about the problem of displaying image width in uniapp in WeChat applets. For more related content on uniapp WeChat applets, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!