有个同事写的页面中如果图片加载失败会出现那种裂图的标志,然后想去掉那个裂图旁边的边框。
我和我同事用了各种各样的骚方法去找那个边框,愣是找不到。没错,那东西应该就是找不到的,也不建议用各种奇葩 css 去调试。
还是用 js 优雅的处理裂图吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 方法 1,移除裂图 -->
<img src="" alt="" onerror="this.parentNode.removeChild(this)" />
<!-- 方法 2,换一张图片,当然你也可以自定义方法,比如将图片隐藏,替换图片为文本也可以 -->
<img src="2.jpg" alt="" onerror="onImgErrorReplageImage(this);" />
<script>
function onImgErrorReplageImage(params) {
console.log('图裂啦,替换一张图片', params);
params.onerror = '';
params.src = '/1.png';
return true;
}
</script>
</body>
</html>