CODEWITHSUNDEEP
htmlimageplaceholder
Harriet
Harriet

Reputation: 1713

Image placeholder for clients own branding image

I currently have a banner, that is 100% wide, but with limited height. Say 100px; I would like to have my clients put in their branding image in a certain directory, where the browser already looks for this image.

If the image is not found, nothing is displayed, and its business as usual. If the image is found, then the image is displayed. At the moment, my code displays an image to indicate that there is supposed to be an image that could not be loaded. codepen:

#banner {
  background-color: aliceblue;
  width: 100%;
  height: 100px;
}
<div id="banner">
  <img src="/images/myImage.jpg"/>
</div>

Upvotes: 1

Views: 41

Answers (1)

pratikhegde
pratikhegde

Reputation: 146

HTML Based solution

<object data="o.png" type="image/png">
    <img src="" />
</object>

https://jsfiddle.net/pratikhegde/mskLf844/

Jquery Based solution: This works after DOM is ready

$('img').error(function() {
    $(this).hide();
  });

https://jsfiddle.net/pratikhegde/k5uo4efh/

Upvotes: 2

Related Questions