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选择器。

相关推荐
黄华SJ520it10 分钟前
跨境分销小程序:全球市场新机遇
小程序·系统开发
爱分享的小诺15 分钟前
微信小程序2.0人脸审核,1.0升级到2.0
微信小程序·小程序
打瞌睡的朱尤34 分钟前
微信小程序(黑马)4-5
微信小程序·小程序
海兰13 小时前
【小程序】基于 AI 大语言模型驱动的中国古典诗词 Web 应用详细设计指南
人工智能·语言模型·小程序
狗凯之家源码网21 小时前
UniApp 数藏系统源码部署与定制开发全指南
uni-app
博客zhu虎康1 天前
小程序:UGC自定义发布内容接入微信公众平台内容安全API(imgSecCheck、msgSecCheck、mediaCheckAsync)
安全·小程序·微信公众平台
RuoyiOffice2 天前
2026 企业定制开发选型:从零开发、低代码、SaaS 与 RuoYi Office 怎么选?
spring boot·uni-app·开源·saas·oa·定制化·ruoyioffice
博客zhu虎康2 天前
小程序:解决小程序发布上线后无分享功能
小程序
tuanyuan99o2 天前
2026商城小程序的安全怎么保障?防止黑客攻击和数据泄露
安全·小程序
三天不学习3 天前
【超详细】Vue3+UniApp+.NET8集成腾讯云IM即时通信全攻略
uni-app·.net·腾讯云·im·即时通信