How to stop broken images showing

Question

I have a table with some images that I want to start out with no images in them.I have set the src="".But when viewed in a browser it shows broken image pics.

<tr>
<td><img src=""> </td>
<td><img src=""> </td>
<td><img src=""></td>
</tr>

How can I prevent the browser from showing the broken image pics or X or whatever until I put some data into the src attribute.

score 33 · Answer 1 · answered Aug 25 '14 at 13:10

33

Add this inline event handler,

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

answered Aug 25 '14 at 13:10

Rakesh Vadnal

975
1
10
22

1

Adding alt="" as a fallback might be a good idea just in case users don't have JS enabled. – Logic1 Jan 05 '17 at 08:58

score 24 · Answer 2 · answered Aug 25 '12 at 12:24

24

Very simple answer is add alt attribute with empty value

<img src="" alt="" width="50" height="50"/>

width & height are optional

answered Aug 25 '12 at 12:24

Ganesh Kumar

1,341
11
18

1

Simple, no-CSS, no-Javascript, cross-browser working workaround. Thanks. – zopieux Apr 25 '14 at 14:23

score 11 · Accepted Answer · edited Jun 20 '20 at 09:12

Simply don't put those img elements there. They have no semantic value. Also, you should read this article: Empty image src can destroy your site on NCZOnline

I guess you're changing the image source with Javascript anyways. You should simply add an img in the cell if there is not one yet (see the example in the MDC appendChild() page).

(Another, uglier solution is to hide the images by default (style="display: none;"), and only display them with Javascript if they get an src. But you should do the first one.)

Oded · Answer 4 · 2011-07-08T09:27:09.623

5

Don't use images that point to nothing.

You could style them to have no visibility (will not work if you have anything in the src attribute, even if it is a bad URL):

img[src=''] 
{
  display: none;
}

But as I already said, if you don't have an image do display, don't put the tag on the page.

edited Jul 08 '11 at 09:27

answered Jul 08 '11 at 09:21

Oded

489,969
99
883
1,009

The best answer. Thank you. – Rez Mohsnei Apr 22 '22 at 21:04

score 4 · Answer 5 · answered Nov 20 '14 at 21:13

4

That's not really an answer to your question, but for completeness' sake: One can remove the image on a loading error (e.g. with an inline script).

<img src="broken.png" onerror="this.parentNode.removeChild(this)">

answered Nov 20 '14 at 21:13

adius

13,685
7
45
46

score 3 · Answer 6 · answered May 12 '16 at 16:47

Great solution that really helped me

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:after {  
  content: attr(alt);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

Idea from https://bitsofco.de/styling-broken-images/

score 1 · Answer 7 · answered Jun 13 '12 at 20:51

Try this:

<img src="http://someurl.com" width='0' height='0'>

Why would you want to do that? I'm using an invisible image to track users -- it hits that url, which is not actually an image and doesn't return one, and logs the user making the request. I'm doing this in environments where I don't have client-side scripting (html email and Google Sites), and this is the easiest way to do it.

score 0 · Answer 8 · answered Apr 24 '18 at 08:12

0

If you're using Semantic UI React you can pass the img element to onError through the event's target property:

<Image src={imageObject.Url} onError={i => i.target.src=''} />

answered Apr 24 '18 at 08:12

Dave Clark

2,243
15
32

Vikrant · Answer 9 · 2019-02-25T07:22:18.827

If you just want to get rid of broken image icon & don't want to hide the image and want to keep the resolution of it as is; Use a transparent base-64 image, to replace it.

Jquery:

$("img").on("error", function() {
    $(this).attr('src' ,'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
});

Pros:

No need to hide the image
No need to change Alt text of the image
base-64 image don't have specific height-width
works with jquery zoom (jquery.zoom.js), if the zoomed image is broken

score 0 · Answer 10 · edited Jul 08 '11 at 10:22

0

Don't put them there. Just insert them later with $('someelement').append("image");

edited Jul 08 '11 at 10:22

kapa

77,694
21
158
175

answered Jul 08 '11 at 09:22

Andreas Eriksson

8,979
8
47
65

score 0 · Answer 11 · answered Jul 08 '11 at 09:23

0

The src attribute is required to point to an image; if you have no image, don't use the img element.

You could use any other element and set the background-image property if required.

answered Jul 08 '11 at 09:23

alex

479,566
201
878
984

score 0 · Answer 12 · answered Jul 08 '11 at 09:24

0

I’d suggest using CSS to hide the image tags initially:

<img src="" style="visibility: hidden;">

Then amend that from your JavaScript when you add the image URL:

yourImgObject.src = 'IMAGEURL';
yourImgObject.style.visibility = 'visible'

answered Jul 08 '11 at 09:24

Paul D. Waite

96,640
56
199
270

score 0 · Answer 13 · answered Sep 09 '22 at 17:46

I would just build on what others have provided by adding a placeholder or fallback image when the primary source is invalid. That way, you're guaranteed to return SOMETHING useful to the user. This is especially helpful when the source is service-driven or RESTful.

Source: missing-images-on-website

<img
    src="<%- data.primaryImage.url %>"
    alt="image description"
    onerror="this.onerror=null; this.src='unavailable.png';"
/>

How to stop broken images showing

13 Answers13

Linked