CODEWITHSUNDEEP
javascripthtmlcssimage
Pradyumna Challa
Pradyumna Challa

Reputation: 1145

Image Placeholder

I have defined the image tag with a background color so that if there is no image the color should show but still the broken image icon is showing how to remove that ?

I dont want to make the page bulky by adding jquery or any framework , also i cant add any kind of divs to images because the site is almost done.

Found the answer with only javascript 

function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}

<img src="someimage.png" onerror="ImgError(this);"/>

Upvotes: 20

Views: 48516

Answers (8)

Sigvel
Sigvel

Reputation: 1

Another solid way to accomplish this if you are using JavaScript is by creating a function for the onerror ->

function createImage(image) {
  const avatar = document.createElement("img");
  avatar.src = `${image}`;
    
  avatar.onerror = function () {
    avatar.src = "../../assets/placeholder/avatar.png";
  };
};

or as the top-rated comment ->

<img src="../image.png" onerror="this.src='../../assets/images/avatar-placeholder.png';">

Upvotes: 0

user3799524
user3799524

Reputation:

Try this.remove() to remove the broken image placeholder:

<div class="cell">
  <p>
    <img src="pic.png" onerror="this.remove();" />
  </p>
</div>

I use cell divs to preserve layout.

Upvotes: 0

DDS
DDS

Reputation: 590

Solution with 1x1 empty png

        function ImgError(source){
            empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
            source.src = "data:image/png;base64," + empty1x1png;
            source.onerror = "";
            return true;
        }

        <img src="someimage.png" onerror="ImgError(this);"/>

Upvotes: 9

Ege
Ege

Reputation: 1202

A simple solution would be to use, literally, a placeholder blank image. This is generally used for sprites but I think you could use this as well.

What you do is, you create a 1x1 px blank gif image with transparency enabled, direct the "src" atrribute to the blank.gif and give the images via the css background-image property. Therefore, even if the background image is not found, it won't show the broken link image.

Upvotes: 4

Nick Lockwood
Nick Lockwood

Reputation: 40995

That's a browser-dependent behaviour, but you can't do anything about it. Here are a couple of options:

1) Use JavaScript to add an onerror handler to the image that hides it when it fails to load by settings it to hidden using css (you'll need to have a containing div to apply the background color to as the background color won't show if the image is hdden).

To apply an error handler to every image in the site without jQuery and without modifying the code, you can do this (put this in a script at the end of the page - it won't work if it's in the <head> and you can't put it in window.onload or it won't fire before the images have loaded).

var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
    images[i].onerror = function() {
        this.style.visibility = 'hidden';
    }
}

2) Set the image as the css background-image on a div instead of using an <img> tag. It's not as semantic, but it won't display a broken image icon if it fails to load, and you can still specify a background color and a label (not an alt tag).

Upvotes: 0

user166560
user166560

Reputation:

The browser does that broken image icon. It's not something you can change within the code. I think you'll find that the different browsers handle missing images differently.

What you want to do could be handled differently, though...

Style:

div.image-maybe-missing {
    width: 300px;
    height: 450px;
    background-color: red;
    background-image: url("/images/is-it-there.png");
}


HTML:

<div class="image-maybe-missing">
</div>

This will give you an empty box with a red background if the image isn't present. The width and height of the div needs to match the width and height of the image.

Upvotes: 1

MassivePenguin
MassivePenguin

Reputation: 3711

It's a feature of some browsers - as far as I can recall, Firefox, Chrome and Safari show nothing while Internet Explorer shows a broken image icon. Short of using Javascript, I don't believe you can override this behaviour.

Upvotes: 1

Hemant Metalia
Hemant Metalia

Reputation: 30648

you can hide that using following:

<img
  src="my.png"
  onerror="this.style.display='none'"
/>

you can display another image if image not found as follow:

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

Upvotes: 58

Related Questions