段逸尘
段逸尘
  • 发布:2020-02-29 18:41
  • 更新:2021-05-29 14:42
  • 阅读:2863

【报Bug】rich-text设置图片宽度100%,微信小程序失效

分类:uni-app

详细问题描述

小程序渲染富文本,图片设置了宽度100%自适应,浏览器显示正常,但微信小程序调试时就是图片宽度超出。

[内容]

代码:
<view class="content">
<rich-text :nodes="descriptionStr"></rich-text>
</view>
if (res.data.goodshtml.content) {
_self.descriptionStr = res.data.goodshtml.content.replace(/<img/g,'<img style="width:100%;height:auto" ');
//_self.descriptionStr = res.data.goodshtml.content.replace(/\<img/gi,'<img style="width:100%;height:auto" ');
}
[步骤]
运行后,谷歌浏览器和内置浏览器显示正常。微信小程序开发工具图片显示超出,无报错信息。
[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]1490145559

2020-02-29 18:41 负责人:无 分享
已邀请:
匿名用户x

匿名用户x - ........

怎么解决的

o***@gmail.com

o***@gmail.com

大佬,问题有解决吗?

C***@163.com

C***@163.com

我用的这种方法:
https://blog.csdn.net/qq_33637730/article/details/105218140?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

1***@qq.com

1***@qq.com

把css样式定义在全局方法里,就是App.vue里:
.content img{
max-width: 100%;
}
html:

<view class="content">  
<rich-text...></rich-text>  
</view>

这样就搞定了

该问题目前已经被锁定, 无法添加新回复