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.

Answer 1

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.)

Answer 2

Very simple answer is add alt attribute with empty value

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

width & height are optional

Answer 3

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.

Answer 4

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/

Answer 5

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=''} />

Answer 6

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