Sometimes, we want to input a default image in case the src attribute of an HTML is not valid with JavaScript.
In this article, we’ll look at how to input a default image in case the src attribute of an HTML is not valid with JavaScript.
How to input a default image in case the src attribute of an HTML is not valid with JavaScript?
To input a default image in case the src attribute of an HTML is not valid with JavaScript, we set the onerror
property to a function that sets the src
property of the img element to a default URL.
For instance, we write
const img = document.getElementById("imageId");
img.onerror = () => {
img.src = "../error.png";
};
img.src = "../correct.webp.png";
to select the img element with getElementById
.
Then we set img.onerror
to a function that sets the src
property to the default image when the actual image doesn’t load.
And we set the src
to the actual image’s URL with
img.src = "../correct.webp.png";
Conclusion
To input a default image in case the src attribute of an HTML is not valid with JavaScript, we set the onerror
property to a function that sets the src
property of the img element to a default URL.