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

相关推荐
超级新零售1 小时前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
xiezhr5 小时前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy
sinat_2676119114 小时前
用 AI 开发微信小程序(八):一个极简收纳工具的开发复盘
微信小程序·小程序
PedroQue991 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
李纲明1 天前
微信小程序真机预览白屏或 request 失败:先核 request 合法域名与 TLS,再查体验版与本地缓存
缓存·微信小程序·小程序·小程序开发·devdiy·真机预览·合法域名
PedroQue991 天前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
klfdgl1 天前
线上商城小程序投入测算,有成熟开发经验服务商的长期收益对比
小程序
一木 之林2 天前
Dify学习笔记 03 · RAG检索增强生成:三代范式、评估与落地(第40-45、55-56集)
笔记·小程序·交互·dify
赵小哥要冲啦2 天前
社区邻里互助小程序从 0 到 1 复盘:需求拆解与信任机制设计
java·小程序·需求分析
河北清兮网络科技2 天前
石家庄做一套企业知识库系统多少钱?2026 报价明细
小程序·短剧app·广告联盟