Picture failed to load, resulting in browser compatibility issues

The website often encounters the problem that the picture load fails, the IMG has the address, but the address opens is wrong. The situation is as follows:

Different browsers to handle the wrong picture is not the same, and some simply show the difference, such as IE, some show a broken picture, and some is to a relatively large default map, such as the PC-side of Firefox, iOS Safari, as well as the UC browser Android. This in the phone will cause the left and right sides of the picture highly inconsistent! The following figure:

Solution

In fact, this solution is very simple, to determine when the picture load failed to give a default diagram can be, do not let the browser use its own default diagram.

derivative issues

Because the picture load failed to enter the default diagram, then the default diagram load failed to do? Isn't this going into a dead loop?

The simplest solution is to make sure that the diagram in the onerror is open and guaranteed to be small! There will be no problem!. This method is also the most effective way!

If you can't guarantee that, then, can only rely on the function to solve this problem!

The idea is:

When the picture fails to load, enter the onerror, the Judge onerror picture is not able to load, in the onerror of the picture triggered OnError, set onerror to null.

The code is as follows: