13

I have an empty img in my page <img ... src=""/>

When an event occurs I set the img attribute to an inline png data:

<img ... src="data:image/png;base64,..."/>

When another event occurs I set the src to nothing (remove the img): myImg.src = ""

The problem is: The img doesn't reload when I set src to nothing. If I hide the img, wait some time and show it again it works but it's an ugly hack...

P.S: I don't want to set a default 'blank' image I need it to be really blank (src = "").

Edit: My javascript:

biometria.setImage = function(png) {
    if(png)
        bioCanvas.src = 'data:image/png;base64,' + png;
    else
        bioCanvas.src = '';
};

Edit2: Browser: Google Chrome 18.0.1025.162 Ubuntu 12.04

Ali
  • 3,373
  • 5
  • 42
  • 54
islon
  • 1,166
  • 2
  • 11
  • 24
  • 1
    grab the base64 code for an transparent 1px/1px and use that, also maybe about:blank but I reckon that will show as broken in some browser as not returning an image format. – GillesC May 02 '12 at 17:49
  • Can you share the script code that you're using? – HMartch May 02 '12 at 17:50
  • My javascript works, it sets the src to "" but the image keep showing. – islon May 02 '12 at 17:55
  • Browser: Google Chrome 18.0.1025.162 Ubuntu 12.04 – islon May 02 '12 at 17:56
  • Can't you simply hide the image when it's empty ? What the use case for the "I need it to be really blank" ? – Denys Séguret May 02 '12 at 18:02
  • Why add/remove the source when you can just show() or hide() the image ? – Zachary May 02 '12 at 18:05
  • He said if he hide it wait and display again it works so I reckon he need it there empty, it could be a frame / place holder if it has a border. The transparent image would do the trick tho, but seems like he need it empty (also I believe that can show broken image icon on older IEs) – GillesC May 02 '12 at 18:07
  • 1
    visibility: hidden when the src is blank? The img will continue to take up space, but won't be visible...what is it that you are trying to accomplish? – Adam Jenkins May 02 '12 at 18:07
  • What's the advantage of having an image with an empty source? – Felix Kling May 02 '12 at 18:08
  • 1
    It seems like the chrome devs (webkit?) make a decision on the checksum of the src attribute. They probably asked themselves "why would anyone have an image element with an empty src?" and decided "you wouldn't". Either way [All browsers but chrome work](http://jsfiddle.net/hP3K3/3/), at least for me. -- I Take that back, Safari 5.1 doesn't either. – Brad Christie May 02 '12 at 18:18
  • seems to relate to an older issue where if the img src is blank the browser would still generate a request to the server...see [Empty image src can destroy your site](http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/) – MikeM May 02 '12 at 18:20
  • I chose the visibility:hidden path it's not perfect but it works for me. Thanks for all the comments. – islon May 02 '12 at 18:23
  • Related post with a fix: http://stackoverflow.com/q/8425817/104380 – vsync Dec 06 '12 at 01:57
  • @GillesC, post your comment as an answer to upvote it ☺ (I used your base64 solution). – Jose Manuel Abarca Rodríguez Apr 15 '21 at 18:49

3 Answers3

14

I handle this issue by blow code and work for me:

document.getElementById('tst').removeAttribute('src');
Ali
  • 3,373
  • 5
  • 42
  • 54
10

Technically, a image tag is required to have a src attribute AND it is supposed to NOT be empty. However, the W3C specification isn't clear on how to handle the cases when the src attribute is empty. As a result, every browser is handling this situation slightly differently.

There are actually quite a few problems that can arise from this lack in specification, yours is just one of them. A more detailed look at this issue can be found here.

As others have pointed out, it is much more preferable to hide/show the image through CSS (either visibility:none if you want to keep the space occupied, or display:none if you want the image to completely disappear). Alternatively, you can simply remove the complete image tag using JS and create a new image when you want to insert it back.

Steve
  • 8,609
  • 6
  • 40
  • 54
  • Thanks, the visibility:hidden did the job even tough it doesn't show the img outline (I can live with that). – islon May 02 '12 at 18:22
  • 3
    @islon Note that if you set an img to `display:none` or `visibility:hidden` and it does have a valid src, it still gets downloaded! – Mr Lister May 02 '12 at 18:24
1

I suggest you replace the image with a new one. In jQuery you could do something like :

$('#yourImage').replaceWith('&lt;img src="" id="yourImage" /&gt;');
cHao
  • 84,970
  • 20
  • 145
  • 172
mystic
  • 132
  • 1
  • 3