如何删除空白图像容器？

如果图像的来源不可用，请如何删除空白图像容器？如果图像的来源可用，我只希望图像出现。否则，我不希望出现任何内容，包括空白容器。如何删除空白图像容器？

HTML图像语法：

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

来源

2013-01-21 Goaler444

我能看到这个工作的唯一方法就是使用JavaScript吗？ –

没问题，对所有解决方案开放 – Goaler444

如果不存在，理想的做法是不显示图像标签。这将需要服务器端处理，虽然 –

你是能够做到这一点使用JavaScript和img标签的error事件。

例如：

<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 } ?>

来源

2013-01-21 23:13:23

不应该是'if（！empty（$ src））'？ –

JavaScript位不能可靠工作。错误处理程序需要在加载图像之前设置。 –

@JosephSilber事实上，这就是深夜溢出来的东西;-) @pekka我刚跑过一个快速测试，而且这个工作令人吃惊（IE10）。我知道当从JS创建DOM Image时，它需要在src之前设置，但是没有将其与'img'标签内联设置，那么可以做更多的事情。 –

遍历您的图像，并结合onerror：

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

来源

2013-01-21 23:09:02

IIRC'onerror'对于图像来说令人难以置信的不可靠。让我看看我是否可以找到源 –

@Pekka웃 - 是的。我认为Safari没有实现它。 –

是的。做一个快速的谷歌，似乎不像我想起的那样不可靠。只要确保你绑定事件*之前*设置'src' –

如何删除空白图像容器？

回答

相关问题