JS if image exists, display it. Otherwise, display text

Question

I'm trying to create a script that check to see whether a logo exists or not. If it doesn't, I want to use innerHTML to output the firm name instead.

$.get(firmlogo)
    .done(function() { 
        document.getElementById('firmlogo').innerHTML = "<img src="+logooffirm+">";

    }).fail(function() { 
        document.getElementById('firmlogo').innerHTML = "<h2>"+nameoffirm+"</h2>";

    })

It displays the text now, even if the logo is there. The error I get is:

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.example.com/[object%20HTMLDivElement] Failed to load resource: the server responded with a status of 404 (Not Found)

Any ideas on what I'm doing wrong?

your `firmlogo` is a reference to a div object, not an actual URL — technophobia, May 06 '15 at 19:43
Do you have a server route setup to handle that `get` request? — tymeJV, May 06 '15 at 19:44
What is `firmlogo` is this a url path to an image on the same domain as the get? — Huangism, May 06 '15 at 19:49
@user2208768 I would let it output the image tag anyway with the source so you can see if the source is correct or not. You will know what's wrong from the result of this debug — Huangism, May 06 '15 at 20:01

score 4 · Answer 1 · answered May 06 '15 at 19:46

4

You're reinventing the wheel. HTML has this feature built-in.

<h2><img src="bad_address" alt="Display this text instead" /></h2>

answered May 06 '15 at 19:46

Etheryte

24,589
11
71
116

The only problem with this is that you get the image box around the alt text – user2208768 May 06 '15 at 19:57

score 0 · Answer 2 · answered May 06 '15 at 19:53

You can use alt to do this without all these stuff. If you want to check if image is available in a certain url use this code.

var image = new Image(); 
image.src = "img.jpg";
if (image.width == 0) {
  console.log("no image");
}
else console.log("image available");

Or you can use the ajax way

$.ajax({
    url: "img.jpg",
    type: "HEAD",
    error: function () { console.log("no image"); },
success:function(){console.log("image available");}

});

JS if image exists, display it. Otherwise, display text

2 Answers2