1***@163.com
1***@163.com
  • 发布:2019-09-26 11:05
  • 更新:2019-09-26 11:05
  • 阅读:5966

uni-app展示富文本内容,图片的宽度溢出屏幕,解决方案!

分类:uni-app

这个问题虽然已经过去有一段时间了,但是我还是要写出来和大家分享!毕竟一个人或者是两个人写的也不一定会符合自己想要的结果,我也不知道会帮到多少人,还是要写一下,供大家参考。。。
现在的项目已经进入尾声,之前遇到这个问题解决了一段时间,在网上找了各种各种,说的不符合我。刚开始我是使用v-html这个api是可以加载富文本的(开始不了解rich-text),加载的富文本因为有图片,图片一直就是溢出屏幕的状态,在网上看了别人说的html.replace()做替换,根据标签替换的html.p.img{width:100% }试过了一遍都不好使,最后一个朋友说是用这个方法比较靠谱。确实很实用的一种方案,下边我写出来供参考:
html: <rich-text :nodes="content"></rich-text>
js: var richtext = res.data.list.Content;
const regex = new RegExp('<img', 'gi');
this.content = richtext.replace(regex, <img style="max-width: 100%;");

但是也有弊端:

0 关注 分享

要回复文章请先登录注册