图片加载失败处理

<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;
        }

  

posted @ 2022-06-01 10:50  Charlie098765  阅读(277)  评论(0编辑  收藏  举报