javascript - HTML/Javascript 从 img src 属性中删除数据

Question

我的页面中有一个空的 img<img ... src=""/>

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

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

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

问题是：当我将 src 设置为空时，img 不会重新加载。如果我隐藏了 img，请等待一段时间并再次显示它，但它是一个丑陋的黑客......

PS：我不想设置默认的“空白”图像，我需要它真的是空白的（src =“”）。

编辑：我的 javascript：

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

Edit2：浏览器：谷歌浏览器 18.0.1025.162 Ubuntu 12.04

Answer 1

我通过打击代码来处理这个问题并为我工作：

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

Answer 2

从技术上讲，图像标签必须具有 src 属性并且它不应该为空。但是，W3C 规范并不清楚如何处理 src 属性为空的情况。因此，每个浏览器处理这种情况的方式都略有不同。

实际上，由于缺乏规范可能会引起很多问题，您的问题只是其中之一。可以在此处找到有关此问题的更详细信息。

正如其他人指出的那样，通过 CSS 隐藏/显示图像更为可取（如果您想保持空间占用，则可以使用可见性：无，如果您希望图像完全消失，则可以使用显示：无）。或者，您可以简单地使用 JS 删除完整的图像标签，并在您想要插入时创建一个新图像。

Answer 3

我建议您将图像替换为新图像。在 jQuery 中，您可以执行以下操作：

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