html - 如何删除空白图像容器？

Question

如果图像的来源不可用，如何删除空白图像容器？我只希望图像在其来源可用时出现。否则，我不想出现任何东西，包括空白容器。

HTML 图像语法：

<img src="url" alt="some_text">  

Answer 1

您可以使用 JavaScript 和errorimg 标签上的事件来执行此操作。

例如：

<img src="url" alt="some_text" id="myimage">

<script>
    var imgElement = document.getElementById('myimage');
    imgElement.addEventListener('error', function()
    {
        this.parentNode.removeChild(this);
    }, true);
</script>

（糟糕，抱歉@JosephSilber，将我的示例修改为有点不同；-)）

如果您知道您的图像将不可用，那么您最好的选择是使用服务器端处理。例如，如果您有意src留空，您可以在 PHP 中执行以下操作：

<?php
$src = ''; // or something else

if (!empty($src)) { ?>
    <img src="<?=$src?>" alt="some_text" />
<?php } ?>

Answer 2

循环浏览您的图像，并绑定onerror：

imgNode.onerror = function () {
    this.parentNode.removeChild(this);
};