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

相关推荐
00后程序员张9 小时前
对比 Ipa Guard 与 Swift Shield 在 iOS 应用安全处理中的使用差异
android·开发语言·ios·小程序·uni-app·iphone·swift
郑州光合科技余经理13 小时前
技术架构:海外版外卖平台搭建全攻略
java·大数据·人工智能·后端·小程序·架构·php
00后程序员张13 小时前
在 iOS 设备上同时监控 CPU、GPU 与内存的方法
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者817 小时前
在 Windows、Linux 与 CI 环境下命令行上传 IPA 到 App Store
linux·windows·ios·ci/cd·小程序·uni-app·iphone
sheji341617 小时前
【开题答辩全过程】以 基于微信小程序的摄影器材租赁系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
毕设源码-邱学长17 小时前
【开题答辩全过程】以 基于微信小程序的社团管理系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
码农客栈18 小时前
小程序学习(十五)之通用轮播组件
小程序
浔川python社18 小时前
《C++ 小程序编写系列》(第七部):C++11 + 新特性实战 —— 性能与稳定性双提升
java·c++·小程序
码农客栈19 小时前
小程序学习(十三)之请求和上传文件拦截器
小程序·uni-app
夏天想19 小时前
解决小程序缓存时间是永久性得除非用户主动删除得问题
java·缓存·小程序