Images are often needed to display in web projects, and it is very likely that the image address will be invalid, such as the image address is incorrect, or the address is invalid after the background gets the image address, or the image is not in the database. At this time, the picture will display a fork.
We can also not deal with this situation in the project, but it affects the beauty, so we will use a default image to replace the original address of the image.
<img :src="" @error="imgError(item)" />
Add an error check to the image. When the image loading fails, the method of this property will be called.
Add the following method in methods:
imgError(item) {
= require('../../assets/');
}
In the method, modify the address of the image to the default address of the image.
After the current end obtains the address parameter of the image from the background through the interface, the parameter is likely to be null. For this case, we should make a judgment. If the image address does not exist, then directly assign a default image address. If the address of the image exists, but the image is not obtained after the link, then this case can be improved by using the above method.
In the above vue article, when the image address is invalid, the way to display the default image is all the content I share with you. I hope you can give you a reference and I hope you can support me more.