在uniapp中,如果你的富文本图片显示宽度不正常,你可以通过设置图片的宽高属性来解决这个问题。例如,你可以在富文本中添加以下代码来设置图片的宽度为100%:
<img src="your_image_url" style="width: 100%" />
另外,如果你想设置图片的高度,你可以添加以下代码:
<img src="your_image_url" style="height: 100px" />
当然,可以实现一个 filter 来自动对图片宽度进行处理。
export default { // ... filters: { formatRichHtml(html) { if (!html) { return html; } //控制小程序中图片大小 let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) { console.log(match.search(/style=/gi)); if (match.search(/style=/gi) === -1) { match = match.replace(/\<img/gi, '<img style=""'); } return match; }); newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; '); newContent = newContent.replace(/<br[^>]*\/>/gi, ''); return newContent; } } // ... }
在调用时只需要如下调用
export default { // ... filters: { formatRichHtml(html) { if (!html) { return html; } //控制小程序中图片大小 let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) { console.log(match.search(/style=/gi)); if (match.search(/style=/gi) === -1) { match = match.replace(/\<img/gi, '<img style=""'); } return match; }); newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; '); newContent = newContent.replace(/<br[^>]*\/>/gi, ''); return newContent; } } // ... }
在调用时只需要如下调用即可
<rich-text :nodes="xxxxxContent | formatRichHtml" />
标签:uniapp,style,...,微信,html,newContent,宽度,match,gi
From: https://www.cnblogs.com/2019gdiceboy/p/17090808.html