uniapp开发小程序使用vue的v-html解析富文本图片过大过宽显示超过屏幕解决办法

如果没有设置的话,就会导致图片溢出,过宽显示或者错位显示,显示效果非常的丑陋:

修改后显示的效果:

网上比较low的解决办法:网上各种解决方法核心思想就是在数据层把数据模板上的img数据加上style样式:max-width``:``100%``;,使每个img标签达到想自己要的效果。但是不推荐

其实解决办法很简单,就是添加一个css样式,给全局的img标签添加,所以要找到富文本里面图片标签,然后给它添加css样式,最好添加属性选择器:

css 复制代码
img,
[alt],
img[alt] {
    max-width: 100%;
}

如果没有生效,可以看一下你的img标签是不是带有alt属性。

如果还是没有生效,检查一下css有没有作用到页面里,还是有问题的话可以尝试一下其他的css选择器。

相关推荐
小徐_23334 小时前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·微信小程序·uni-app
小小王app小程序开发5 小时前
场馆预约小程序留存率提升指南:技术落地与运营实操全解析
小程序
00后程序员张9 小时前
HTTPS Everywhere 时代的抓包挑战,从加密流量解析到底层数据流捕获的全流程方案
网络协议·http·ios·小程序·https·uni-app·iphone
草字9 小时前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
速易达网络10 小时前
Uniapp + Coze智能在线课程平台应用实现方案
uni-app
Qlittleboy12 小时前
uniAPP开发 image 标签的@error事件不被触发调用怎么办
uni-app
我命由我1234514 小时前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
吳所畏惧14 小时前
少走弯路:uniapp里将h5链接打包为apk,并设置顶/底部安全区域自动填充显示,阻止webview默认全屏化
android·安全·uni-app·json·html5·webview·js
weixin_4721835415 小时前
微信小程序使用websocket
websocket·微信小程序·小程序
发财北15 小时前
线上交友APP怎么开发?
小程序