Javascript – HTML/Javascript remove data from img src attribute


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

My javascript:

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

Edit2: Browser: Google Chrome 18.0.1025.162 Ubuntu 12.04

Best Solution

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.