Image is not displaying PHP MYSQL

Question

I want to display all of my images from the database but it seems like it's not properly displayed. I've tried many times but still not well displayed. Everything is displayed except the image. This is the code.

 <?php

include("include/connection.php");

$query = "SELECT * FROM cat";

$result = mysqli_query($conn, $query);

?>

This is the table

<form action="add_cat.php"><div align="right"><button class="btn btn-success mb-2">Add New Cat</button></div></form>
            <table class="table border border-dark" width="50%" cellpadding="5" cellspacing="5">
                <thead class="thead-secondary">
                    <tr>
                        <th scope="col">Num</th>
                        <th scope="col">Cat ID</th>
                        <th scope="col">Picture</th>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Gender</th>
                        <th scope="col">Description</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                <!-- fetched data from cat table -->
                <?php 
                $num =1;
                while($row = mysqli_fetch_assoc($result)) { ?>
                    <tr>
                        <th scope="row"></th>
                            <td><?php echo $num; ?></td>
                            <td><?php echo $row['id_cat']; ?></td>
                            <td> <?php echo '<img src="data:img/cat;base64,' .base64_encode($row['picture']).'" style="width:100px; height:100px;">'; ?></td>
                            <td><?php echo $row['name']; ?></td>
                            <td><?php echo $row['age']; ?></td>
                            <td><?php echo $row['gender']; ?></td>
                            <td><?php echo $row['description']; ?></td>
                            <td>
                                <button class="btn btn-primary">Edit</button>
                                <button class="btn btn-danger">Delete</button>
                            </td>
                    </tr>
                    <?php $num++;
                     } ?>  
                </tbody>
            </table>

Answer 1

It might be because the mime type for the img src attribute isn't valid. It should be something like image/jpeg , image/png , image/webp etc, depending on the format of the image stored in your database.

<tr>
    ...
    <td><?= $row['id_cat'] ?></td>
    <td><img src="data:image/png;base64, <?= base64_encode($row['picture'])  ?>" style="width:100px; height:100px;"></td>
    <td><?= $row['name'] ?></td>
    ...
</tr>

Note: The <?= $content ?> syntax is shorthand for <?php echo $content; ?> <?php echo $content; ?> and should be supported by default if you're using PHP 5.4 or newer (You should be at least using 7.4).