If you display an image directly from a database, your web page is filled with garbage instead of a beautiful photo.
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.
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.
+