HTML/Javascript 从 img src 属性中删除数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10419005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/Javascript remove data from img src attribute
提问by islon
I have an empty img in my page <img ... src=""/>
我的页面中有一个空的 img <img ... src=""/>
When an event occurs I set the img attribute to an inline png data:
当事件发生时，我将 img 属性设置为内联 png 数据：
<img ... src="data:image/png;base64,..."/>
<img ... src="data:image/png;base64,..."/>
When another event occurs I set the src to nothing(remove the img): myImg.src = ""
当另一个事件发生时，我设置src到什么（删除图片）：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...
问题是：当我将 src 设置为空时，img 不会重新加载。如果我隐藏 img，请稍等片刻并再次显示它可以工作，但这是一个丑陋的黑客......
P.S: I don't want to set a default 'blank' image I need it to be really blank (src = "").
PS：我不想设置默认的“空白”图像，我需要它真的是空白的（src = ""）。
Edit: My javascript:
编辑：我的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
Edit2：浏览器：Google Chrome 18.0.1025.162 Ubuntu 12.04
采纳答案by Steve
Technically, a image tag is required to have a src attribute AND it is supposed to NOT be empty. However, the W3C specificationisn'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.
从技术上讲，图像标签需要有一个 src 属性，并且它不应该是空的。但是，W3C 规范并不清楚如何处理 src 属性为空的情况。因此，每个浏览器处理这种情况的方式略有不同。
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.
正如其他人指出的那样，通过 CSS 隐藏/显示图像更可取（如果您想保持空间被占用，则使用可见性：无，或者如果您希望图像完全消失，则显示：无）。或者，您可以简单地使用 JS 删除完整的图像标签，并在您想要插入时创建一个新图像。
回答by mystic
I suggest you replace the image with a new one. In jQuery you could do something like :
我建议您用新的图像替换图像。在 jQuery 中，您可以执行以下操作：
$('#yourImage').replaceWith('<img src="" id="yourImage" />');
回答by Ali
I handle this issue by blow code and work for me:
我通过打击代码处理这个问题并对我来说有效：
document.getElementById('tst').removeAttribute('src');
