图片加载失败后css样式处理方式
<img src="a.png" alt="图片的描述内容" onerror="this.classList.add('error')" >
- 对应上方的img,当加载失败时,触发onerror事件,为便签添加类名.error
- 使用 img.error 优化加载失败的图片
优化如下
<style>
img.error {
position:relative;
display:inline-block;
}
img.error:before {
content:"";
background: url('default.png');
}
img.error:after {
content: attr(alt);
}
</style>