Display Image From MySQL Using PHP

Blob Data as Image

Here I am going to show you an example how you can fetch blob (Binary Long Object) type data from MySQL database and display as image on the web page. Before you display the blob data from MySQL server make sure you had stored the blob data for an image only otherwise it won’t show on the page.

You may go through the tutorial how to save file data as a blob in MySQL using PHP before you go further in this tutorial.

Prerequisites

PHP 8.2.7, MySQL 8.1.0, HTTP Server (Optional), how to save file data as a blob in MySQL using PHP

MySQL Table

The following table called file is created under roytuts database in the MySQL server.

CREATE DATABASE IF NOT EXISTS `roytuts`;
USE `roytuts`;

CREATE TABLE IF NOT EXISTS `file` (
  `id` int unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `content` mediumblob,
  `size` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `type` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Retrieve and Display Blob as Image

Here now I am going to show you how you can retrieve blob data from MySQL and display the binary data as image on the web page.

<?php 
// Include the database configuration file  
require_once 'db_config.php';
 
// Get image data from database 
$result = $db->query("SELECT * FROM file ORDER BY id DESC");

$img_types = array('jpg','png','jpeg','gif'); 
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP Retrieve File From Database</title>
        <style>
            img {
                display: block;
                max-width:280px;
                max-height:280px;
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>

<!-- Display images with BLOB data from database -->
<?php if($result->num_rows > 0){ ?>
    <div class="gallery"> 
        <?php while($row = $result->fetch_assoc()){            
            if(in_array($row['type'], $img_types)) { ?>
            <label><strong>Image Name:</strong> <U><?php echo $row['name']; ?></U></label><p/>
            <img src="data:image/<?php echo $row['type']; ?>;charset=utf8;base64,<?php echo base64_encode($row['content']); ?>" alt="<?php echo $row['name']; ?>" />
            <p/>
        <?php } } ?>
    </div> 
<?php }else{ ?> 
    <p class="status error">Image(s) not found...</p> 
<?php } ?>

</body>
</html>

In the above code snippets you can see that I have verified whether the content is for image or not and I am displaying if the content is for image.

Testing Image Display

Let’s say an image was saved in the database:

view image from mysql

When you access URL http://localhost in the browser you will see the following output:

display image from mysql

Hope you have got an idea how to display image from MySQL database to web page using PHP.

Source Code

Download

Leave a Reply

Your email address will not be published. Required fields are marked *