How Does One Use the “Onerror” Attribute on an Img Element?
The “onerror” is an event listener that calls a JavaScript function or performs a specified operation when an error occurs. It can be applied to the “img” element to call or display an alert message when the provided path of the image is not found. However, the “<img>” tag has the attribute name “alt” that also performs the same operation but it cannot set the image’s new path or call the JavaScript function. That’s why the usage of the “onerror” event listener is a better choice.
This blog explains the purpose and usage of onerror attribute on an img element.
How to Use the “onerror” Attribute on an Img Element?
The “onerror” event listener is placed inside the “<img>” tag along with other attributes and it performs the specified operation when any error occurs. The “onerror” event listener helps a lot in error handling, enhancing the user experience, and in the process of debugging. This can be particularly used in the process development and testing stages.
Syntax
The syntax for the “onerror” event listener is stated below.
The below syntax is the HTML format of using the “onerror” event listener, attached to the “HTMLele” element to call specified “demoFun” functions:
The below syntax is in the JavaScript form, where the “onerror” is attached to a specific object which invokes the function to perform a specified line of code:
Let’s walk through examples for a better understanding.
Example 1: Applying “onerror” Event Listener on HTML “img” Element
In this example, the “onerror” event listener is used to change the value of “image” using the direct approach and JavaScript function:
<img src="invalidImg.jpg" onerror="handleError(this)" height="300px" width="400px">
<script>
function handleError(img) {
img.src = "validImagePath.jpg";
img.onerror = null;
}
</script>
Explanation of the above code:
- First, the “<img>” tag is used that contains the invalid image link for the “src” attribute. The “onerror” event listener is also attached, which triggers only if an error gets encountered.
- As the provided image path is invalid, the “onerror” part executes it sets two values, the first is null, and the second is a new valid image path for the “source” file. The “height” and “width” attributes are also used to set the image dimension.
- Next, the “<img>” tag is used a second time, and the “invalid” path is also provided to the “src” attribute. To handle this error, the “onerror” event listener is used that calls the JavaScript “handleError()” function, and the reference of this “img” element is also passed as a parameter.
- In the “handleError()”, the value for the “src” attribute is modified, and the “onerror” event listener is set to “null”, to prevent an infinite loop.
After the compilation:
The output shows that with the help of the “onerror” event listener, the invalid image path has been modified with the valid path to display the image.
Example 2: Applying “onerror” Event Listener Using JavaScript
The “onerror” event listener can also be assigned to a specific HTML element using JavaScript, as shown below:
<script>
const temp = document.getElementById('demo');
temp.onerror = function() {
handleError(this);
};
function handleError(img) {
img.src = "validImagePath.jpg";
img.onerror = null;
}
</script>
Description of the above code:
- First, the image is inserted on the webpage by utilizing the “img” tag, and an invalid path is set for its “src” attribute, which generates an error.
- Inside the “<script>” tag, store the reference of the “img” element in a variable named “temp”. Also assigned an “onerror” event listener to it that calls the “handleError()” function.
- Inside this function, the “onerror” and “src” attributes are selected and modified values are provided to them.
- After providing the valid link to the “src” attribute, now the image gets displayed successfully.
After the compilation, the output looks like this:
The output shows that using the “onerror” event listener, the “src” attribute of the “<img>” tag is changed.
Conclusion
The “onerror” event listener invokes or operates in the case of an error occurrence. If talking specifically about the “img” element, the error can be generated when its “src” attribute gets an invalid or unreachable path link. It is stated inside the HTML “<img>” tag and uses the “onerror” event listener to invoke the JavaScript function or to change the attribute values for the selected “<img>” tag. That’s all about the usage of an “onerror” event listener on an HTML “img” element.
Source: linuxhint.com