Handling multiple image errors in Javascript: Onerror handlers for images

Question

Handling multiple image errors in Javascript: Onerror handlers for images

Seeking a solution to establish multiple fallbacks for image loading in the event that the original image source encounters an exception.

If we have an image tag like <img id="art">, this JS code will set a fallback image src to album.jpg when the initial image cover.jpg results in an error:

var art = document.getElementById('art');

art.src = "cover.jpg";

art.onerror = () => {
    art.src = "album.jpg";
};

How can we activate an additional onerror handler to establish another fallback option if album.jpg is not found? For example, if the loading of cover.jpg fails, followed by the failure of album.jpg, how do we then set up another fallback to something like front.jpg and so forth?

javascript image fallback onerror

Answer 1

Answer №1

If the src property is updated multiple times, the same onerror handler will be triggered repeatedly.

let pic = document.getElementById('pic');

let sources = ['image1.jpg', 'image2.jpg','image3.jpg', 'image4.png']

pic.src = sources.shift()

pic.onerror = e => {
  console.log(`Failed to load ${pic.src}`)
  if(sources.length) pic.src = sources.shift()
}

<img id="pic">

Answer 2

If the src property is updated multiple times, the same onerror handler will be triggered repeatedly.

let pic = document.getElementById('pic');

let sources = ['image1.jpg', 'image2.jpg','image3.jpg', 'image4.png']

pic.src = sources.shift()

pic.onerror = e => {
  console.log(`Failed to load ${pic.src}`)
  if(sources.length) pic.src = sources.shift()
}

<img id="pic">

Answer 3

Answer №2

Avoid adding extra error handlers; one instance will handle every change to the src attribute.

However, be cautious as this could lead to an infinite loop if the image fails to load and triggers a repetitive change of the src to 'album.jpg'.

To prevent this endless cycle, you can check the current src value and adjust your logic flow accordingly. Detecting the last possible image can help break the chain of errors.

var art = document.getElementById('art');
art.onerror = e => {
  console.log(`${e.target.src} not found`);
  
  if (e.target.src.endsWith('/cover.jpg'))
    art.src = "album.jpg";
  else if (e.target.src.endsWith('/album.jpg'))
    console.log('Last image - ending loop');  
};

art.src = "cover.jpg";

<img id="art" />

If you have multiple fallback images, consider using an array or object to list them and iterate through them sequentially.

Answer 4

Avoid adding extra error handlers; one instance will handle every change to the src attribute.

However, be cautious as this could lead to an infinite loop if the image fails to load and triggers a repetitive change of the src to 'album.jpg'.

To prevent this endless cycle, you can check the current src value and adjust your logic flow accordingly. Detecting the last possible image can help break the chain of errors.

var art = document.getElementById('art');
art.onerror = e => {
  console.log(`${e.target.src} not found`);
  
  if (e.target.src.endsWith('/cover.jpg'))
    art.src = "album.jpg";
  else if (e.target.src.endsWith('/album.jpg'))
    console.log('Last image - ending loop');  
};

art.src = "cover.jpg";

<img id="art" />

If you have multiple fallback images, consider using an array or object to list them and iterate through them sequentially.

Handling multiple image errors in Javascript: Onerror handlers for images

Answer №1

Answer №2

Similar questions

using props as arguments for graphql mutation in react applications

Altering the input field's content in response to a button click through JavaScript's addEventListener function

Bi-weekly Calendar Gathering

In Javascript, you can compare an array with a nested array and then store the values in a new array

Is it possible to retrieve a list of controllers that are connected to an object in Three.js?

When I submit a form with an empty date input field, the Datepicker is sending a 0000-00-00 date

What is the best way to extract raw data from a kendo dataSource?

Tips for inserting a row component into a table using Angular 7

The user input form in BotFramework V4 nodejs prompts the user again after submission

Angular watch triggering even when the old and new values remain unchanged

Is it possible to assign ng-model to multiple values simultaneously?

What are some ways to prevent "window.onbeforeunload" from appearing when a form is submitted?

Add a hovering effect to images by applying the absolute positioning property

Removing the "delete" button upon clicking within ng-repeat

I have attempted to create custom code for the built-in JavaScript function (toLocaleUpperCase). Can this be considered helpful or not?

Locating the elusive sequence number within a document

Tips for resolving the issue of "unable to load style sheet" in Bootstrap

Using jasmine with Array.from is not a compatible combination

What causes the element to load with a transparent appearance? And why is my JavaScript code overriding the hover effect on it?

When using window.location.href and location.reload(), the updated page content from the server is not loaded properly