JS if image exists, display it. Otherwise, display text [duplicate]

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
– technophobia, Commented May 6, 2015 at 19:43
Do you have a server route setup to handle that get request? — tymeJV
– tymeJV, Commented May 6, 2015 at 19:44
What is firmlogo is this a url path to an image on the same domain as the get? — Huangism
– Huangism, Commented May 6, 2015 at 19:49

Etheryte · Accepted Answer · 2015-05-06 19:46:56Z

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 6, 2015 at 19:46

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

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

1 Comment

user2208768 Over a year ago

The only problem with this is that you get the image box around the alt text

tkay · Accepted Answer · 2015-05-06 19:53:45Z

0

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");}

});

answered May 6, 2015 at 19:53

tkay

1,69614 silver badges18 bronze badges

Collectives™ on Stack Overflow

JS if image exists, display it. Otherwise, display text [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related