Skip to main content

Tedshd's Dev note

HTML - image load error handle

Table of Contents

# HTML - image load error handle

2 way

## Use onerror

<img src="<image url>" onerror="this.src='<d4 image url>'" />

## Use Magic Image Pseudo Element

img.imgd4 {
    position: relative;
    display: block;
}

img.imgd4:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(<d4 image url>) no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    content: '';
}