How to stop broken images showing

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.

Answers


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


Add this inline event handler,

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

Very simple answer is add alt attribute with empty value

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

width & height are optional


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.


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

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/


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.


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'

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


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.


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

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

Need Your Help

Java JPA Unit Test saving 2 items

java hibernate jpa jboss-arquillian

I have a simple @OneToMany setup with 2 entities - Item and Group, and am having an interesting problem. When my integration test creates a Group, adds an Item to it and saves the Group, 2 instanc...

Vertically aligning <div>'s within Bootstrap

jquery html css twitter-bootstrap jquery-ui

So I'm using Bootstrap's grids to create (particularly here) a description of some variable T and a slider corresponding to it. The problem is that these two guys are not vertically aligned by defa...