Avg. Rating 5.0
Tags:



Problem

If you display an image directly from a database, your web page is filled with garbage instead of a beautiful photo.

Solution

The browser doesn't know how to handle the data stored in the database, so it just dumps raw data onto the screen. You need to store the image's MIME type in the database, and use a proxy script to display the image in your web page.

Detailed explanation

When an image is stored in your website's file system, the web server automatically sends information to the browser telling it the image's MIME type, so it knows how to display it. However, when you store an image as a BLOB (binary large object) in a database, all that's sent to the browser is the raw data. The information about the image's MIME type ( image/gif, image/jpeg, or image/png, depending on the image) needs to be stored in a separate text field, and sent as a header to the browser. You do this using a proxy script.

Let's assume you have a database that stores images and related details in the following columns: image_id (the primary key that identifies the image), mimetype (one of the three values listed in the preceding paragraph), and image (the actual image data).

In Dreamweaver, create a new PHP page, and save it as show_image.php. Create a recordset called getImage using the Recordset dialog box in simple mode. Select the three columns: image_id, mimetype, and image. Set the Filter options to image_id = URL Parameter image_id, and click OK.

In Code view, delete all the HTML code. You should be left with the following PHP code (I have cut out the definition of GetSQLValueString() for brevity):

<?php require_once('Connections/testConn.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, 
$theDefinedValue = "", $theNotDefinedValue = "")
{
 // function definition omitted
}
}

$colname_getImage = "-1";
if (isset($_GET['image_id'])) {
  $colname_getImage = $_GET['image_id'];
}
mysql_select_db($database_testConn, $testConn);
$query_getImage = sprintf("SELECT mimetype, image FROM images
WHERE image_id = %s", GetSQLValueString($colname_getImage, "int"));
$getImage = mysql_query($query_getImage, $testConn) or
die(mysql_error());
$row_getImage = mysql_fetch_assoc($getImage);
$totalRows_getImage = mysql_num_rows($getImage);
mysql_free_result($getImage);
?>

To display the image in a web page, the proxy script needs to send a header containing the MIME type, followed by the image data. Add the following two lines of code immediately above mysql_free_result($getImage):

header('Content-type: ' . $row_getImage['mimetype']);
echo $row_getImage['image'];

To display the image in a web page, set the image's src attribute to show_image.php?image_id= followed by the primary key of the image you want to display. Get the primary key from the web page's own recordset. So, instead of this, which displays the raw data:

<img src="<?php echo $row_getdetails['image']; ?>"
alt="Image from DB" />

Use this, which displays the image through the proxy script:

<img src="show_image.php?image_id=<?php echo
$row_getdetails['image_id']; ?>" alt="Image from DB" />

You can download the completed proxy script in show_image.zip attached below.


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes