Change image src on error with JavaScript

Question

I have an image that sometimes returns a 404 error. To get the image to load, it usually works if the image src is slightly modified, for example adding "?reload=true" to the end of it. How do I do this using JavaScript?

<img src="example.com/image.png" onerror="reloadImage()">

<script>

function reloadImage() {

    // Set img src to "example.com/image.png?reload=true"

}

</script>

Pass this as an agument to reloadImage, and do thisArg.src = "example.com/image.png?reload=true" in the function. — Teemu
– Teemu, Commented Apr 3, 2021 at 20:34
Great! How do I also get the current src then add the "?reload=true" to it? The image source is not always "example.com/image.png", it might be "example.com/another_image.png" as well — Steve Alereza
– Steve Alereza, Commented Apr 3, 2021 at 20:36
You could be in danger of looping indefinitely - probably should have some break after a certain number of attempts - but better would be to find out why you are getting a 404 - is the image on a server that you have some control over? — A Haworth
– A Haworth, Commented Apr 3, 2021 at 20:37
A Haworth the image comes from an API where the src is the API request. Sometimes it doesn't work right away, but when reloaded it works — Steve Alereza
– Steve Alereza, Commented Apr 3, 2021 at 20:40

Lawrence Cherone · Accepted Answer · 2021-04-03 20:55:09Z

4

Try passing the element into the function, also clear the error event else it could infinite loop.

function reloadImage(img) {
  img.onerror = null

  let url = new URL(img.src)
  url.searchParams.set('reload', 'true')
  img.src = url.toString()
}

<img src="example.com/image.png" onerror="reloadImage(this)">

The ideal solution would be to track down why it's erroring in the first place and fix that.

edited Apr 3, 2021 at 20:55

answered Apr 3, 2021 at 20:40

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Alereza Over a year ago

Thanks! How can this be modified so that the new src from reloadImage() becomes the original src of the image with "?reload=true" tacked onto it?

Collectives™ on Stack Overflow

Change image src on error with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related