How to stop broken images showing

I have a table with some images that I want to st开发者_开发知识库art 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.

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

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

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/

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.

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

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

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';"
/>