部分摘自原文链接:
https://www.zhihu.com/question/27426689
https://segmentfault.com/a/1190000005958514
代码来了:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
}
img{
width:100px;
height:100px;
border-radius: 50%;
background-color: pink;
display:inline-block;
border-style:none;
/* overflow:hidden; */
}
</style>
</head>
<body>
<div>
<img src="javascript:;" alt="111" />
</div>
</body>
以上代码 360浏览器下效果，会有边框。谷歌浏览器下img带alt属性时无边框，不带alt属性同样有边框。
image.png
经测试假如图片带有border-radius ,可以添加 overflow:hidden; 去除
测试 360浏览器会有切边边框问题。Chrome正常 ，360效果如下
image.png
推荐这种方式解决 给img加onerror属性
<img src="abc.gif" onerror="this.onerror=null;this.src='111.gif'" />
或者
<img src="abc.jpg" onerror="onerror=null;src='123.jpg'" />
onerror=null是当图片加载失败的时候，我们可以利用onerror事件赋予它默认图片，但是问题来了，假如默认图片又不存在呢，即加载失败，这个时候就会陷入死循环。
为了避免死循环的情况，我们可以在执行完onerror事件后，置于onerror=null 来清除onerror事件
网友评论