CODEWITHSUNDEEP
jqueryhtmlcss
james
james

Reputation: 2663

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.

Upvotes: 12

Views: 28627

Answers (13)

Great Scott
Great Scott

Reputation: 1325

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

Upvotes: 0

Vikrant
Vikrant

Reputation: 5036

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

Upvotes: 0

Dave Clark
Dave Clark

Reputation: 2301

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

Upvotes: 0

michalzuber
michalzuber

Reputation: 5215

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/

Upvotes: 3

adius
adius

Reputation: 14960

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

Upvotes: 4

Rakesh Vadnal
Rakesh Vadnal

Reputation: 985

Add this inline event handler,

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

Upvotes: 34

Ganesh Kumar
Ganesh Kumar

Reputation: 1361

Very simple answer is add alt attribute with empty value

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

width & height are optional

Upvotes: 25

Jonathan Frankel
Jonathan Frankel

Reputation: 21

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.

Upvotes: 1

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

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

Upvotes: 0

Oded
Oded

Reputation: 499132

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.

Upvotes: 5

kapa
kapa

Reputation: 78731

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

Upvotes: 11

Paul D. Waite
Paul D. Waite

Reputation: 98846

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'

Upvotes: 0

alex
alex

Reputation: 490413

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.

Upvotes: 0

Related Questions