网站图片加载失败后CSS样式处理更佳实践

需求：

图片加载失败后给图片标签加上一个类名，给该类添加伪元素引入我们自己需要的加载失败图片覆盖在裂掉的图片上，并把alt内容加载显示在其中

HTML

<img src="imgX.png" alt=alt内容" onerror="this.classList.add('error');">


CSS

img.error {  display: inline-block;  transform: scale(1);  content: '';  color: transparent; } img.error::before {  content: '';  position: absolute;  left: 0; top: 0;  width: ; height: ;  background: #f5f5f5 url(img.png) no-repeat center / 50% 50%; } img.error::after {  content: attr(alt);  position: absolute;  left: 0; bottom: 0;  width: ;  line-height: 2;  background-color: rgba(0,0,0,.5);  color: white;  font-size: 12px;  text-align: center;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; }