如何解决img标签src为空或加载失败后的边框问题?
程序员文章站
2022-05-30 15:12:44
...
img标签的src为空或者加载失败,浏览器都会自动加上一个边框,这会让人头疼,因为它一定程度上影响着网页的美观。。。
昨天我就遇见了这个问题,最后找到了自我觉得比较理想的方法。
(1)针对路径为空,网上还有js、绝对定位、margin聚焦等方法,个人认为这是最简单有效的方法(人太懒了,哈哈哈)
img[src=""],img:not([src]){opacity:0;} /*这样可以实现在路径为空时隐藏*/
(2)针对图片加载失败:
首先找到加载失败的原因,路径、分辨率,或者其他问题?
如果是路径的话,好解决;分辨率的话,就可以用lowsrc=“低分辨率时显示的图片";
遇见其他的问题,那么可以通过onerror去设置一个用于出错时显示的默认图片,个人觉得这种情况下就是解决其样式的问题 了,这个网站提供了很多样式:https://bitsofco.de/styling-broken-images/
上一篇: 错误:方法不会覆盖或实现超类型的方法
下一篇: 小程序入门到实战(二)--案例源码分享