html - 空の画像コンテナを削除するには?

Question

イメージのソースが利用できない場合、空白のイメージ コンテナを削除するにはどうすればよいですか? ソースが利用可能な場合にのみ画像を表示したいと思います。それ以外の場合は、空のコンテナーを含め、何も表示したくありません。

HTML 画像の構文:

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

Answer 1

errorこれは、JavaScript とimg タグのイベントを使用して行うことができます。

例えば：

<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);
};