HTML/Javascript remove data from img src attribute

Question

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

Answer 1

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

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

Answer 2

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.

Answer 3

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

$('#yourImage').replaceWith('<img src="" id="yourImage" />');