JSP - 404 handling for image

Question

I am using the below code to fetch images from my server :

<a href="#">
    <img src="<%
        if(user.getImageURL()!=null){
           out.print(user.getImageURL);
        }else{
           out.print("images/no-profile-pic-small.jpg");
        }%>" />
</a>

The above code handles the case when the imageURL is null, but how do I handle the case when the imageURL returns a proper URL but that image is not found on the server i.e. 404 Not Found ?

EDIT : The image is located on a different server.

If you have a correct image URL, then how can it be the case of "*404 Not Found*"? It may however be the case of "*access denied*" due to the permission factor. — Lion, Apr 14 '13 at 10:23
The url is stored in the DB. But the image may or may not be present as it is an external resource. There are only a few such cases among thousands but I would like to handle them nonetheless. — soundswaste, Apr 14 '13 at 10:25
You cannot know this on the server side, as the browser attempts to fetch the image. Either you try to fetch the image on the server side to know if it exists (NOT recommended) or you do some JS/CSS-magic at the client side. Or you check it when the user provides the URL. This may still result in a 404 some days/weeks later, but alas... — skirsch, Apr 14 '13 at 10:43
If you are in control over the server which delivers the images and for example using an apache httpd you could check if its there with mod_rewrite. but that are two big ifs, i think — Finn, Apr 14 '13 at 10:51

score 2 · Answer 1 · answered Apr 14 '13 at 10:42

2

At the moment, you're not doing any checking of the path in JSP, merely putting the path in the HTML if present. This means that you don't know if the path exists until the HTTP request comes through for the image. You've two main options:

Check if there's a file at that path in your JSP code before including it, otherwise fallback to your placeholder:

<% 
    String userImagePath = user.getImageURL();
    File userImage= new File(userImagePath);
    if(!userImage.exists()){
        userImagePath = "fallBackImagePath.png";
    }
%>

<img src="<%= userImagePath %>"/>

Or let your HTML handle a non-displaying image, e.g.:

<img src="non-existent.png" class="fallBackBackground"/>

<style>
    .fallBackBackground {
        background: url(./placeholderImage.png);
    }
</style>

This may result in you serving a fallback image that's not needed though, plus it relies on the images being the same size.

answered Apr 14 '13 at 10:42

anotherdave

6,656
4
34
65

Is this a better method than checking it using javascript ? – soundswaste Apr 15 '13 at 15:49
Checking via JSP will move the effort to the server side, which will give you an incremental gain in performance on the client-side. It's generally seen as preferable to make this effort on the back-end, but it depends on your site! – anotherdave Apr 15 '13 at 17:18
Oh and will this work if this image is on a different server ? Say .. being fetched from facebook ? I seem to be getting a 'false' for even images that load fine. – soundswaste Apr 15 '13 at 18:29
If you're fetching the images from Facebook, I'd be inclined to use the Graph API & let Facebook handle placeholder images for when the image isn't available - http://graph.facebook.com/USERNAME/picture?type=large – anotherdave Apr 15 '13 at 21:23

score 0 · Answer 2 · edited May 23 '17 at 11:57

I resolved this problem using jquery and onerror attribute :

My server side code now is :

<a href="#">
    <img src="<%
        if(user.getImageURL()!=null){
           out.print(user.getImageURL);
        }else{
           out.print("images/no-profile-pic-small.jpg");
        }%>" onerror="profilePicNotFound(this);" 
    />
</a>

And a small jquery function :

function profilePicNotFound(image){
    image.src='images/no-profile-pic-small.jpg';
}

This works nicely if the image is located on a different server. More here.

JSP - 404 handling for image

2 Answers2