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