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" ');
                });
相关文章
|
6天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
11天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
25 3
|
12天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
12 0
在线拼接图片工具HTML源码
|
22天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
24 0
|
24天前
|
前端开发
app下载介绍页HTML源码
APP下载页前端自适应HTML源码,可以作为自己的软件介绍页或者app下载页,喜欢的朋友可以拿去研究
20 2
app下载介绍页HTML源码
|
2月前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
31 0
|
2月前
|
UED
12.使用HTML制作交互图片
12.使用HTML制作交互图片
34 0
|
2月前
uni-app 157发布朋友圈-批量上传图片
uni-app 157发布朋友圈-批量上传图片
14 0
|
2月前
uni-app 114发送图片功能
uni-app 114发送图片功能
17 0
|
29天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?