uni-app利用v-html展示富文本内容，图片的宽度溢出屏幕，可否设置为100%？而且视频文件还不能播放，这又怎么解决？
3***@qq.com
- 发布：2018-10-12 15:33
- 更新：2022-03-12 19:41
- 阅读：30436
飘过大山 - 99
直接将后台返回的html代码中含有img的添加一个style属性就好了
html.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
2***@qq.com - 没掉头发的程序员宝宝
v-html="marketContent "
let marketContent = res.data.data.marketContent;//后台给的字段
this.marketContent = marketContent.replace(/\<img/g, '<img style="max-width:100%;height:auto" '); //data里自己定义了一个marketContent ，replace会返回一个新的值
3***@qq.com (作者) - android开发工程师、h5开发工程师
（1）利用 rich-text 渲染，那数据节点怎么转换？不是要自行将富文本字符串转换成对应的rich-text数据节点格式？那这个有比较好的转换插件吗？
（2）还有我想编辑富文本文件内容，又要用啥组件呢？
富文本不支持 font-family: font-size:1em; line-height:2em;" sans="" serif",="" tahoma,="" verdana,="" helvetica
这种样式
2***@qq.com - 没掉头发的程序员宝宝
uni-app的富文本图片溢出问题亲测
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady">
<view class="containBox">
<view v-html="marketContent"></view>//zhi
</view>
</editor>
marketContent 再data里定义一下
let marketContent = res.data.data.marketContent; 接收后台给我的值
<p><img src="xxx.jpg" width="790" height="14268"/></p>//后台给的这个字段marketContent
最后搞定
this.marketContent = marketContent.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
html部分：
<rich-text :nodes="content">
</rich-text >
js部分：
let richtext= res.data.content;
let regex = new RegExp('<img', 'gi');
richtext= richtext.replace(regex, `<img width="100%"`);
this.content = richtext;h5、微信小程序、真机 测试可用。其他没有测试
2***@qq.com
我使用了rich-text但是图片还是超出了，设置的class不生效
2018-12-31 00:43