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

相关推荐
软件开发技术18 小时前
新版点微同城主题源码34.7+全套插件+小程序前后端 源文件
小程序·php
chQHk57BN19 小时前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
mon_star°1 天前
消防安全培训小程序项目亮点与功能清单
小程序
自然 醒1 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
编程迪1 天前
基于Java和Vue开发的在线问诊系统医疗咨询小程序APP
小程序
CHB1 天前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
CHU7290351 天前
知识触手可及:在线教学课堂APP的沉浸式学习体验
前端·学习·小程序
h_jQuery1 天前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
困困的果果头1 天前
【uniapp】解决H5嵌套在web-view中时打包页面与状态栏重叠
前端·uni-app
前端 贾公子1 天前
Uniapp 使用 UQRCode 创建二维码
uni-app