富文本多个图片出现白条

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;

}

直接将富文本中的内容在页面上展现会出现图片过大,图片之间存在空白间隙的情况

解决方法:

1、重新解析富文本,将img宽度设置为100%---解决图片宽度过大问题

2、为其父元素设置flex布局---解决图片之间出现空白间隙问题

猜你喜欢

转载自blog.csdn.net/qq_41687299/article/details/125477348