How to not show img element where src is equal to null

Question

I’m making a system where the user can post images, texts, etc...but in the system every image posted should be uploaded to the server and the user can delete them.

With the exclusion of the server image then the posts containing such an image present error 404.

I know it is possible to display a standard image for images not found via .htaccess but what I want is to show neither error nor standard image, simply not show the img.

The system is thus structured:

Page home.php

<?php
ob_start('ob_gzhandler');
session_start();
header ('Content-type: text/html; charset=UTF-8');

if(isset($_GET['last_msg_id'])){
   $last_msg_id = $_GET['last_msg_id'];
}
if(isset($_GET['action'])){
   $action=$_GET['action'];
}else{ 
   $action = ''; 
}

if($action != "get"){
?>
   <div id="coisaEstranha" style="margin-top:2%;">
                 <?php include('load_first.php'); ?>
                 <div id="last_msg_loader"></div>
            <?php }else{ include('load_second.php');exit();}?>
   </div>

<script type="text/javascript">
$(function(){   
    function last_msg_funtion(){
      if($('#last_msg_loader img').length){
         return;
      }
      var ID = $(".message_box:last").attr("id");

      $.post("home.php?action=get&last_msg_id="+ID, function(data){
          if (data != "") {
             $(".message_box:last").after(data);     
          }
          $('#last_msg_loader').empty();
      });
    };

    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           last_msg_funtion();
        }
    });     

    var refreshId = setInterval(function() {
     // Caso scroll seja maior que 150 pixels
     if($(window).scrollTop() < 150){
         $("#coisaEstranha").load('load_first.php');
     }
   }, 60000);

}); 
</script>

Page load_first.php

<?php
header ('Content-type: text/html; charset=UTF-8');
$Busca = $pdo->query("SELECT * FROM posts ORDER By id DESC LIMIT 15");
$Busca->execute();

while($fetch = $Busca->fetch(PDO::FETCH_ASSOC)){    
     $msgID= $fetch['id'];
     $msg= $fetch['content'];
    ?>
    <div id="<?php echo $msgID; ?>" class="message_box" >
   <div>
         <div id="xiao"><?php echo $msg; ?></div><!-- ESTA STRING TRÁS A POSTAGEM! -->   
         <input id="id_post" type="hidden" value="<?php echo $id_post;?>">
       </div> 
    </div>    
    <?php
}
?>

Page load_second.php

<?php
header ('Content-type: text/html; charset=UTF-8');
$last_msg_id=$_GET['last_msg_id'];

$Busca = $pdo->query("SELECT * FROM posts WHERE id < '$last_msg_id' ORDER By id DESC LIMIT 15");
$Busca->execute();

while($fetch = $Busca->fetch(PDO::FETCH_ASSOC)){
    $msgID= $fetch['id'];
    $msg= $fetch['content'];
    ?>
    <div id="<?php echo $msgID; ?>" class="message_box" >
       <div>        
         <div id="xiao"><?php echo $msg; ?></div><!-- ESTA STRING TRÁS A POSTAGEM! -->    
         <input id="id_post" type="hidden" value="<?php echo $id_post;?>">
       </div> 
    </div>
    <?php
}
?>

Answer 1

The correct, I believe would be to test via PHP if the image exists, testing for example with file_exists, depends on how your structure is.

You can even put in your CSS so that images with the attribute src voids are not displayed, example:

img[src=""]{display:none;}

Jsfiddle

If in your database is saved the image including the tag img, a solution would be to parse HTML with PHP and get the src, then test if the image exists, example:

$img = '<img src="caminho/imagem.png" />';
$dom = new DOMDocument();
$dom->loadHTML($img);
$imagem = $dom->getElementsByTagName('img')->item(0)->getAttribute('src');

if(file_exists($imagem)){
    //exibe a imagem
}

---

EDIT

Another option would be to rewrite the image with htaccess to a 1x1 transparent pixel png image, example:

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule \.(gif|jpe?g|png|bmp) ../img/invisivel.png [NC,L]

Answer 2

Create a blank default image and check to see if the src image has something, if not, put the image blank.

<?php

$imagem = $variavel['imagem_do_banco'];

if($imagem == '' or empty($imagem)){
echo '<img src="imagem_padrao.jpg">';
}else{
echo '<img src="'.$imagem.'">';
}
?>

Or try putting a Hidden in the style tag <img>

<?php

$style = ($variavel['imagem_banco'] == '') ? 'display:none;' : 'display:block';
$image = $variavel['imagem_banco'];

echo '<img src="'.$image.'" style="'.$style.'">';
?>

Answer 3

Try the following:

<?php
function removeEmptyImagesFromHtml($html) {
    $lastUseInternalErrors = libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML($html);
    libxml_use_internal_errors($lastUseInternalErrors);

    $imgNodes = $dom->getElementsByTagName('img');
    $nodesToRemove = array();
    foreach($imgNodes as $imgNode) {
        if( !$imgNode->hasAttribute('src') || trim($imgNode->getAttribute('src')) === '' ) {
            $nodesToRemove []= $imgNode;
        }
    }
    foreach($nodesToRemove as $node) {
        $node->parentNode->removeChild($node);
    }
    return $dom->saveHTML();
}
ob_start('removeEmptyImagesFromHtml');
?>
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <html>
        <img src="teste.png" />
        <img src="" />
        <img />
        <img src="ola.gif" />
    </html>
</html>
<?php
ob_end_flush();

The HTML output must be between the ob_start (that stores the HTML in memory, without passing to the browser) and the ob_end_flush (which sends the modified HTML to the browser).