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
|
6天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
8 0
在线拼接图片工具HTML源码
|
15天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
21 0
|
18天前
|
前端开发
app下载介绍页HTML源码
APP下载页前端自适应HTML源码,可以作为自己的软件介绍页或者app下载页,喜欢的朋友可以拿去研究
17 2
app下载介绍页HTML源码
|
2月前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
31 0
|
2月前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
23 0
|
2月前
uni-app 157发布朋友圈-批量上传图片
uni-app 157发布朋友圈-批量上传图片
13 0
|
2月前
uni-app 114发送图片功能
uni-app 114发送图片功能
16 0
|
2月前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片
|
22天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?