Find out if loaded image is not valid (e.g. is a 404 error page)

Question

does someone know a way, how I could find out if a loaded image is not an image because e.g. a 404 error was returned?

In case of an error I would like to set my image URL to e.g. white image.

I can't use server-side techniques like 404-error-handling or servlets, because I want to serve my images with Amazon S3 which doesn't have error handling or redirecting to a "default file" in case the requested image was not found.

Have a look at this answer: http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images — Jonathon Bolster, Jan 07 '11 at 13:23

score 7 · Answer 1 · answered Jan 07 '11 at 13:39

7

The Image class has an addErrorHandler method. Register an error handler, which is fired in case the image was not loaded correctly. In this handler you can than set the image to a default image.

answered Jan 07 '11 at 13:39

Hilbrand Bouwkamp

13,509
1
45
52

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

You may find the answer to this question useful. It uses jQuery but the idea of detecting that an image was not correctly loaded in the browser is well handled.

edited May 23 '17 at 12:11

Community

1
1

answered Jan 07 '11 at 13:23

Vincent Ramdhanie

102,349
23
137
192

score 0 · Answer 3 · answered Jan 05 '14 at 21:15

Not sure what the state of error handling was when this question was asked but S3 currently has 404 error handling. I use that to generate thumbs on demand.

Setup the bucket for static website hosting

Add a redirection rule under the static website hosting section such as:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals/>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>yoursite.com</HostName>
      <ReplaceKeyPrefixWith>image/generate/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

In the above case a missing image (i.e. cat.jpg) will cause a call to:

http://yoursite.com/image/generate/cat.jpg

In my case I use that to deliver thumbnails.

Here's a use case:

<img src="http://awsbucketurl.com/thumb_cat.jpg">

This causes a 404 triggered by S3 which then calls my site with the url. I see that it is prefixed with 'thumb_' and will then fetch cat.jpg from S3, resize, upload thumb to S3 for next time and deliver it as well to browser for this session.

One caveat: If the image is called by a caching system then it will not receive the new image after the 404 but instead store the missing image.

Find out if loaded image is not valid (e.g. is a 404 error page)

3 Answers3