How to solve the problem of not displaying the default picture when the web picture does not exist?

This article mainly explains "how to solve the problem of not displaying the default picture when the web picture does not exist". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to solve the problem of not displaying the default picture when the web picture does not exist".

When displayed on the page, in case the image is moved or lost, a picture with an X will be displayed on the page, which will affect the user's experience. Even if the "picture XX" message is given using the alt attribute, it doesn't help much.

The processing method of not displaying pictures on web pages

In fact, it can be handled like this: when the picture does not exist, the onerror event will be triggered, and we can do some remedial work in this event, such as:

1. Let the image element be hidden:

2. Replace it with the default image:

Note: if used improperly, it can cause an endless loop under the browser of the IE kernel. For example, when [the url address of the default image] does not load successfully (for example, when the network speed is slow) or does not exist, it will be loaded repeatedly, resulting in a stack overflow error.

The default picture is not displayed when the picture does not exist.

Therefore, there are two ways to solve the problem:

A, change the onerror code to something else or make sure that the default image in onerror is small enough and exists.

B. To control that the onerror event is triggered only once (if there is a problem with the default image loading, it will cause the event to be triggered all the time). You need to add this sentence: this.triggnernerrloadr = null; is added as follows:

At this point, I believe you have a deeper understanding of "how to solve the problem of not displaying the default picture when the web picture does not exist". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!