How to hide ugly picture which css if not available?

Question

If the logo.png picture is not available, then it is hidden along with the logo from css.

<div class="logo">
<img  src="logo.png" onerror="this.onerror=null;style='display:none;'"/>
</div>

Example http://jsfiddle.net/dzanis/t5Lg2ay0/

TODO The question is solved by replacing the transparent image

<div class="logo">
<img  src="logo.png" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"/>
</div>

http://jsfiddle.net/dzanis/dex1m47L/

when src source image is not found. [Check the link below](https://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found) — Sinju Angajan, Jul 09 '19 at 06:32
Thanks, works by replacing transparent gifs. http://jsfiddle.net/dzanis/95bLzae4/ — dzanis, Jul 09 '19 at 07:07

Nidhin Joseph · Answer 1 · 2019-07-09T06:10:49.123

3

Try this way

<img src="http://aqualight.atspace.eu/logo.pngs" onerror='this.style.display = "none"' />

Using CSS

function onImgError(ev) {
  ev.className = "error";
}

img {
  height: 100px;
}

.error {
  display: none;
}

<img src="http://www.twentyonepilots.com/sites/g/files/g2000004896/f/Sample%202_0.jpdg" onerror='onImgError(this)' />

edited Jul 09 '19 at 06:10

answered Jul 09 '19 at 06:04

Nidhin Joseph

9,981
4
26
48

he asked about error with css. This will only detect errors with src – Omri Attiya Jul 09 '19 at 06:05
This hides the entire block logo – dzanis Jul 09 '19 at 06:09

How to hide ugly picture which css if not available?

1 Answers1