在uniapp中，如果你的富文本图片显示宽度不正常，你可以通过设置图片的宽高属性来解决这个问题。例如，你可以在富文本中添加以下代码来设置图片的宽度为100%： <img src
在uniapp中，如果你的富文本图片显示宽度不正常，你可以通过设置图片的宽高属性来解决这个问题。例如，你可以在富文本中添加以下代码来设置图片的宽度为100%：
<img src="your_image_url" />
另外，如果你想设置图片的高度，你可以添加以下代码：
<img src="your_image_url" />
当然，可以实现一个 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" />新建公用-util.js
imgDeal(str){
return str.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"');
}index.Vue
<rich-text :nodes="content"></rich-text>index.js
this.content=this.util.imgDeal(content);到此这篇关于uniapp在微信小程序中图片宽度显示问题的文章就介绍到这了,更多相关uniapp微信小程序图片宽度显示内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: uniapp在微信小程序中图片宽度显示问题示例代码
本文链接: https://www.lsjlt.com/news/194186.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0