HTML/Javascript remove data from img src attribute
html, image, javascript
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.
Problem
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