HTML/Javascript如何从img src属性中删除数据

Question

我在网页中有一张空的图片：<img ... src=""/>

当一个事件发生时，我将图片属性设置为内联png数据：

<img ... src="data:image/png;base64,..."/>

当另一个事件发生时，我将src设置为nothing（删除图片）：myImg.src = ""

问题是：当我将 src 设置为 nothing 时，图片不会重新加载。如果我隐藏图片，等待一段时间后再显示它，它就可以正常工作，但这是一个丑陋的 hack......

P.S: 我不想设置默认的 'blank' 图片，我需要它真正为空（src =“”）。

编辑： 我的javascript：

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

编辑2：浏览器：Google Chrome 18.0.1025.162 Ubuntu 12.04

- islon

---

获取一个透明的1px/1px的base64代码并使用它，也许可以使用about:blank，但我认为在某些浏览器中会显示为损坏，因为它不返回图像格式。 - GillesC

当src为空时，使用visibility：hidden？图像将继续占用空间，但不可见...您想要实现什么？ - Adam Jenkins

看起来Chrome开发人员（Webkit？）对src属性的校验和做出了决定。他们可能会问自己“为什么会有一个空的src图像元素？”并且得出结论“你不会有这种情况”。无论如何，所有浏览器都可以正常工作，至少对我来说是这样的（http://jsfiddle.net/hP3K3/3/），但我撤回之前的话，Safari 5.1也不能正常工作。 - Brad Christie

相关帖子及修复方法：https://dev59.com/9moy5IYBdhLWcg3wnfYi - vsync

@GillesC，请将您的评论发布为答案以便投票☺（我使用了您的base64解决方案）。 - Jose Manuel Abarca Rodríguez

Answer 1

我通过以下代码解决了这个问题，并且它对我起作用：

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

- Ali

Answer 2

从技术角度来说，一个图片标签必须有一个src属性，且它不应该为空。然而，W3C规范并没有明确说明当src属性为空时如何处理。因此，每个浏览器对这种情况的处理略有不同。

事实上，这种规范的缺失可能会导致很多问题，你遇到的只是其中之一。更详细的解释可以在这里找到。

正如其他人所指出的，最好的方法是通过CSS来隐藏/显示图片（如果您想保留空间，则使用visibility:none；如果您希望图像完全消失，则使用display:none）。或者，您可以使用JS将整个图片标签移除，并在需要再次插入时创建一个新的图片。

- Steve

---

谢谢，visibility:hidden 虽然不显示图像轮廓（我可以接受），但它完成了工作。 - islon

请注意，如果您将图片设置为display:none或visibility:hidden，并且它具有有效的src属性，它仍然会被下载！ - Mr Lister

Answer 3

我建议您用新的图片替换它。在jQuery中，您可以这样做：

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

- mystic