HTML/Javascript remove data from img src attribute

10
votes

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

3
javascripthtmlimage
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
Can you share the script code that you're using? - redlena
My javascript works, it sets the src to "" but the image keep showing. - islon
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
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, at least for me. -- I Take that back, Safari 5.1 doesn't either. - Brad Christie

3 Answers

9
votes

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.

8
votes

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

document.getElementById('tst').removeAttribute('src');
3
votes

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