圖片載入失敗處理
阿新 • • 發佈：2022-06-01
<img src="xxx.png" alt="載入失敗" onerror="this.classList.add('error');">
img.error {
display: inline-block;
transform: scale(1);
content: '';
color: transparent;
}
img.error::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* border-radius: 6px; */ background: #f7f7f7 url(img/img_error.png) no-repeat center / 50% 70%; }
img.error::after { content: attr(alt); position: absolute; left: 0; bottom: 0; width: 100%; line-height: 2; background-color: rgba(0, 0, 0, .1); color: white; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }