img tag onerror event

Sometimes, the src picture in the img tag fails to load, and a fragment icon appears in the original picture position, which makes people very uncomfortable. How to make it more beautiful?

You can borrow the onerror event of the img tag. The img tag supports the onerror event. If an error occurs during the loading of the document or image, the onerror event will be triggered. You can use a picture that prompts an error instead of a picture that can't be displayed. code show as below:

<img src="images/logo.png" οnerrοr="javascript:this.src='images/logoError.png';">

When the image images/logo.png does not exist, the onerror event will be triggered, and the image/logoError.png image is specified for the img in onerror. That is to say, if the image images/logo.png exists, logo.png will be displayed, and if the image images/logo.png does not exist, logoError.png will be displayed.

problem¶

If images/logoError.png does not exist, the onerror event will continue to be triggered, resulting in an infinite loop, so a Stack overflow at line: 0 error will appear when opening the webpage. Special note: If the picture exists but the network is not smooth, the onerror event may also be triggered.

Solution¶

Control it not to loop, the code is as follows:

<img
             src="../../assets/visualImg/null.jpg"
             alt
             @error="errImg"
           />


     errImg() {
       let img = event.srcElement;
       img.src = require("../../assets/visualImg/null.jpg");
       img.onerror = null; //Prevent flash image control, don't keep beating
     },