Broken image handling in internet browser

Question

How to hide broken image icon as shown as 'https://www.underconsideration.com/brandnew/archives/google_broken_image_00_a_logo.gif' when there is no image shown? I have created a comment box using php and css which allowed user to leave comment as well as upload photo. However, if user want to leave comment only instead of uploading any photo, the comment section would show broken image icon if they only left comment without upload any photo.

I did applied onError='this.style.display ='none';' and alt='' on my script, but still no luck.

here is the code that i wrote to display the comment and photo when user leave comments or uploads photos:

function getComments($conn){
    $sql = "SELECT * FROM comments";
    $result = $conn->query($sql);
    while ($row = $result->fetch_assoc()) {
        echo "<div class = 'comment_box'><p>";
            echo "<div class = 'comment_id'><p>";
                echo $row['uid']."<br>";
            echo "</p></div>";
            echo "<div class = 'comment_date'><p>";
                echo $row['date']."<br>";
            echo "</p></div>";
            echo "<div class = 'comment_msg fixed'><p>";                
                echo make_clickable(nl2br($row['message']));
            echo "</p></div>";

            echo "<div id='img_div'>";
                echo "<img class='img_size' src='images/".$row['image']."' onError='this.style.display ='none';' alt='' />";                
            echo "</div>";


        echo "</p>
            <form class='delete-form' method='POST' action='".deleteComments($conn)."'>
                <input type='hidden' name='cid' value='".$row['cid']."'> 
                <button type='submit' name='commentDelete'><img class='img_remove' src='img/remove.png'>REMOVE</button>
            </form>
            <form class='slash-form '>|
            </form>
            <form class='edit-form' method='POST' action='editcomment.php'>
                <input type='hidden' name='cid' value='".$row['cid']."'> 
                <input type='hidden' name='uid' value='".$row['uid']."'> 
                <input type='hidden' name='date' value='".$row['date']."'> 
                <input type='hidden' name='message' value='".$row['message']."'> 
                <button><img class='img_change' src='img/change.png'>EDIT</button>
            </form>         
        </div>";
    }
}

The issue of broken image icon occurred at:

echo "<div id='img_div'>";
    echo "<img class='img_size' src='images/".$row['image']."' onError='this.style.display ='none';' alt='' />";                
echo "</div>";

Answer 1

I can't say for certain what your database looks like, but you can render a conditional block using something along the lines of this:

if (isset($row['image']) && $row['image'] != '') {
    echo "<div id='img_div'>";
    echo "<img class='img_size' src='images/" . $row['image'] . "' alt='' />";
    echo "</div>";
} else {
    echo "<div id='img_div'>";
    echo "<img class='img_size' src='images/path-to-blank-image.png'alt='' />";
    echo "</div>";
}