Handling Image Loading Errors - img tag onerror

The onerror attribute in an HTML <img> tag is an event handler attribute that allows you to specify a script to run if an error occurs while loading an image. This can be useful for handling situations where an image fails to load, such as when the image URL is incorrect or the image is missing.

Here's the basic syntax for using the onerror attribute with an <img> tag:

<img src="image.jpg" onerror="imgError()">

In this example, if the image "image.jpg" fails to load, the imgError() function will be called. You can define the imgError() function in a <script> tag in the same HTML document or in an external JavaScript file:

<script>
  function imgError() {
    // Code to handle the error, such as replacing the image with a placeholder
    console.log('Image failed to load');
  }
</script>

You can also pass some information to the error handling function using this, which refers to the <img> element itself. For example:

<img src="image.jpg" onerror="imgError(this)">

Then, in your JavaScript function:

function imgError(img) {
  // Access properties of the image element
  console.log('Error loading image: ' + img.src);
  // You can also replace the image source with another image
  img.src = 'placeholder.jpg';
}

Example with a Placeholder Image

Here's an example where we use the onerror attribute to replace a missing image with a placeholder:

<img src="image.jpg" onerror="this.src='placeholder.jpg'">

In this case, if "image.jpg" fails to load, the onerror attribute changes the src attribute of the <img> tag to "placeholder.jpg", which will then load instead.

Security Considerations

It's important to be cautious when using the onerror attribute, especially if the value is dynamic or user-controlled, as this can potentially lead to security vulnerabilities like cross-site scripting (XSS) attacks. Always validate and sanitize any user input before using it in an onerror attribute or any other attribute that executes code.

Alternatives

If you're working with more complex error handling, such as loading images asynchronously or needing more robust error handling, you might consider handling image loading errors using JavaScript event listeners rather than the onerror attribute directly. Here's an example using an event listener:

<img id="myImage" src="image.jpg">

<script>
  const image = document.getElementById('myImage');
  image.addEventListener('error', function() {
    console.log('Error loading image: ' + image.src);
    image.src = 'placeholder.jpg';
  });
</script>

This script achieves the same result as the onerror attribute but allows for more flexibility and control in handling image loading errors.