Image loading failed to replace image css solution

tags: css Image failed to load Image failed to load default image css Default picture solution

img {
  position: relative;
}
 
img:after { 
  content: url('Alternative image');
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

This use should be some of the characteristics of the img tag:

1. img is a special tag, which has the same substitution as video. When the image is loaded successfully, the previously defined pseudo-class will lose its function without prompting.

2. The alt attribute will appear when the image fails to load (alternative text), so that the pseudo-class will work.

The common js solution is: through the onerror event of img, but it can be solved with css, why use js, haha

Learn from:

Intelligent Recommendation

WebVIEW HTTP image loading failed

...

CSS implementation of sprite image failed to load image

Failure prompt: 1. The console reports an error file not found. 2. The loaded pictures cannot be found in the images folder of the resource. Possible reasons for failure: 1. Image path error (most com...

Replace the bloody case caused by the image loading framework

I am going to change the image loading framework in the project today. Good guy, it’s a problem. Different image loading frameworks There are different APIs that cause me to change them. I regre...

Browser loading image error solution

In the past two days, I found that when the browser visited Baidu Post Bar or Baidu Experience, or even something on Baidu, I found that the pictures could not be loaded. as the picture shows. But whe...

Solution for image delay loading (for mobile)

2019 Unicorn Enterprise Heavy Glour Recruitment Python Engineer Standard >>> When the picture is more than the picture on the page, in order to optimize performance, delay loading technology ...