欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何解决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/

相关标签: 错误总结