Question

How can I remove a blank image container if the image’s source is unavailable please? I would only like the image to appear if its source is available. Otherwise, I don’t want anything to appear, including the blank container.

HTML image syntax:

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

Answer 1

You are able to do this using JavaScript and the error event on the img tag.

For example:

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

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

(Oops, sorry @JosephSilber, modified my example to be a bit different ;-))

Your best bet would be using server-side processing if you know that your image isn’t going to be available. If you’re intentionally leaving the src blank, for example, you can do something like this in PHP:

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

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