White bars appear in multiple rich text images

const formatRichText = (html) => {
    let newContent = html.replace(/\<p/gi,'<p style="display: flex;flex-direction: column;"').replace(/\<img/gi, '<img style="width:100%;height:auto;margin:0rpx;padding:0rpx;vertical-align:bottom;"');

    return newContent;

}

Directly displaying the content in the rich text on the page will cause the picture to be too large and there will be blank spaces between the pictures

Solution:

1. Re-parse the rich text and set the img width to 100% --- solve the problem of too large image width

2. Set flex layout for its parent element --- solve the problem of blank gaps between pictures