uniapp开发微信小程序中图片大小显示不正常
2023-12-20 04:53:02
解决方式1:
可以在富文本中添加以下代码来设置图片的宽度为100%:
<img src="your_image_url" style="width: 100%" />?
另外,如果你想设置图片的高度,你可以添加以下代码:
<img src="your_image_url" style="height: 100px" />?
解决方式2:
可以实现一个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;
? ? ? ? }
? ? }
? ? // ...
}
调用:
<rich-text :nodes="xxxxxContent | formatRichHtml" />
文章来源:https://blog.csdn.net/qq_16946803/article/details/135083631
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!