CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
systempuntoout
systempuntoout

Reputation: 74164

How to silently hide "Image not found" icon when src source image is not found

Do you know how to hide the classic “Image not found” icon from a rendered HTML page when an image file is not found?

Any working method using JavaScript/jQuery/CSS?

Upvotes: 99

Views: 101103

Answers (10)

Victor Eke
Victor Eke

Reputation: 555

Here's a react solution

import ErrorIcon from "./icon-source"

export default function Component() {
  const [imageError, setImageError] = useState(false);

  return (
    <>
      {!imageError ? (
      <img
        src={imgUrl}
        width={300}
        height={300}
        alt="my image"
        loading="lazy"
        decoding="async"
        onError={() => setImageError(true)}
      />
    ) : (
      <ErrorIcon />
    )}
    </>
  );
}

Instead of displaying nothing, this solution highlights the image is missing by displaying an error icon.

Upvotes: 0

Donn Frederick Lucas
Donn Frederick Lucas

Reputation: 40

Just simply add blank alt attribute on your <img>

Something like this: <img src="..." alt="">

Upvotes: 1

Sash
Sash

Reputation: 311

I've slightly modified the solution suggested by Gary Willoughby, because it briefly shows the broken image icon. My solution:

    <img src="..." style="display: none" onload="this.style.display=''">

In my solution image is hidden initially and is shown only when it is successfully loaded. It has a disadvantage: users will not see halfloaded images. And if user has disabled JS then they will never see any images

Upvotes: 12

Owais Bin Rizwan
Owais Bin Rizwan

Reputation: 11

Just Use simple css

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}

Upvotes: -1

Jacek Głodek
Jacek Głodek

Reputation: 2424

i've found a nifty method to do exactly this, while being still functional when using ng-src directive in Angular.js and like...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

it's basically a shortest transparent GIF (as seen http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html )

of course this gif could be kept inside some global variable so it won't mess up the templates.

<script>
  window.fallbackGif = "..."
</script>

and use

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

etc.

Upvotes: 4

Q_Mlilo
Q_Mlilo

Reputation: 1797

To hide every image error, just add this JavaScript at the bottom of your page (just before the closing body tag):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Upvotes: 7

Adway Lele
Adway Lele

Reputation: 394

It may be little late to answer, but here is my attempt. When I faced the same issue I fixed it by using a div of the size of image & setting background-image to this div. If the image is not found, the div is rendered transparent, so its all done silently without java-script code.

Upvotes: 5

Andy E
Andy E

Reputation: 344803

You can use the onerror event in JavaScript to act when an image fails to load:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

In jQuery (since you asked):

$("#myImg").error(function () { 
    $(this).hide(); 
});

Or for all images:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

You should use visibility: hidden instead of .hide() if hiding the images might change the layout. Many sites on the web use a default "no image" image instead, pointing the src attribute to that image when the specified image location is unavailable.

Upvotes: 107

jAndy
jAndy

Reputation: 236202

Doing a quick research on Andy E's answer, its not possible to live() bind error.

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

So you have to go like

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

directly binding the error event handler on creating a new element.

Upvotes: 4

Gary Willoughby
Gary Willoughby

Reputation: 52608

<img onerror='this.style.display = "none"'>

Upvotes: 119

Related Questions