uni-app使用v-html输出富文本图片溢出解决

简介: uni-app使用v-html输出富文本图片溢出解决

1.使用

<!-- 这是在获取富文本内容 -->
<view class="detail">
       <view v-html="resData.content"></view>
</view>

2.问题:图片溢出了

3.解决

uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕

pageDetaile(data).then(res =>{
                    this.resData = res.data.data;
                    this.resData.content = res.data.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
                });
相关文章
|
4天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
15 3
|
5天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
7 0
在线拼接图片工具HTML源码
|
17天前
|
前端开发
app下载介绍页HTML源码
APP下载页前端自适应HTML源码,可以作为自己的软件介绍页或者app下载页,喜欢的朋友可以拿去研究
17 2
app下载介绍页HTML源码
|
1月前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
31 0
|
1月前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
23 0
|
1月前
uni-app 157发布朋友圈-批量上传图片
uni-app 157发布朋友圈-批量上传图片
13 0
|
1月前
uni-app 114发送图片功能
uni-app 114发送图片功能
16 0
|
1月前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片
|
2月前
|
小程序 API
uni-app上传音频,图片步骤
uni-app上传音频,图片步骤
25 0
|
2月前
|
前端开发
自适应APP下载页HTML源码
自适应APP下载页HTML源码
43 0
自适应APP下载页HTML源码