How to replace a broken img url with a default when the broken url does not exists

Question

I'm making a search tool where all employees of a company can find their names. these values are retrieved using json. (this includes a link to a image of the employee).

My question. Sometimes the link doesn't exists (wrong input from the other system due to automatic generation). If thats so i want to replace the image with a default one. How can i check if a image-link doesn't exists/is wrong?

    for ( i = 0; i < totalResultsToShow; i++) {
        //when the photoURL isn't given     
        if (searchResults[i].photoURL == "") {
            searchResults[i].photoURL = imagesURL + "silhouette.jpg";
        }
        //when the photoURL doesn't exists

        //do something??

        HTMLContent += "<div class=resultTableRow id=" + i + " onclick=resultClicked(" + i + ");>";
        HTMLContent += "<div class=resultTableItemImage><img width ='" + resultsImageWidth + "' src='" + searchResults[i].photoURL + "' class=stretchWidth /></div>";
        HTMLContent += "<div class=resultTableItemUser><p>" + searchResults[i].user + "</p></div>"
        HTMLContent += "<div class=resultTableItemUsername><p>" + searchResults[i].username + "</p></div>"
        HTMLContent += "</div>"; "</div>";
    }
//put results on screen

I think 1 solution is to put the code for the image in a try/catch block. But i personally dont like try/catch blocks.

[EDIT 1] I agree with you about checking for existence and undefined. Only the link does exists in the Results array. But its a corrupt link. Is there any way to check links before adding them to the html in Javascript?

[EDIT 2] The error im getting is: GET http://...... /---.jpg 404 (Not Found)

[SOLUTION] notice the onerror=this.src='"+imagesURL+"/silhouette.jpg'

HTMLContent += "<div class=resultTableItemImage><img width ='" + resultsImageWidth + "' src='" + searchResults[i].photoURL + "' class=stretchWidth onerror=this.src='"+imagesURL+"/silhouette.jpg' /></div>";

Thnx

I think this answers your question: http://stackoverflow.com/questions/9022427/see-if-src-of-img-exists — Lian, Sep 18 '12 at 07:03
something like this indeed. Is it possible to correct the img src directly in the onerror? — Marcel, Sep 18 '12 at 07:20

score 1 · Answer 1 · answered Sep 18 '12 at 07:03

1

if (typeof searchResults[i].photoURL === "undefined") {
    searchResults[i].photoURL = imagesURL + "silhouette.jpg";
}

answered Sep 18 '12 at 07:03

chovy

72,281
52
227
295

score 1 · Answer 2 · answered Sep 18 '12 at 07:04

1

if (!searchResults[i].photoURL) {
        searchResults[i].photoURL = imagesURL + "silhouette.jpg";
    }

answered Sep 18 '12 at 07:04

secondflying

871
1
7
16

score 1 · Answer 3 · answered Sep 18 '12 at 07:04

1

You can check for the existence of searchResults[i].photoURLby saying:

if(searchResults[i].photoURL) { 
    // your code 
} else { 
    // what to do if not found
}

answered Sep 18 '12 at 07:04

Eivind Eidheim Elseth

2,294
1
23
28

score 0 · Accepted Answer · answered Sep 24 '12 at 18:14

[SOLUTION] notice the onerror=this.src='"+imagesURL+"/silhouette.jpg'
Html + javascript in 1 line.

HTMLContent += "<div class=resultTableItemImage><img width ='" + resultsImageWidth + "' src='" + searchResults[i].photoURL + "' class=stretchWidth onerror=this.src='"+imagesURL+"/silhouette.jpg' /></div>";

when an error occurs the 'onerror=' replaces the given src with the provided src behind the onerror

How to replace a broken img url with a default when the broken url does not exists

4 Answers4