How To Display An Image From A MySQL Table

[JustinK101]

Hello,

 

I have images stored in a MySQL table as blobs. How in the world can I load the images from MySQL into a web page, using for example <img src> tag.

 

I assume the first thing I need to do is retrieve the image via a MySQL query:

 

$sql = "SELECT myImage FROM images WHERE id = 1";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

//Now what do I with this to display the image?
$row->myImage

 

Thanks.

[MadTechie]

example

$sql = "SELECT myImage FROM images WHERE id = 1";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

//for JPEG
header("Content-type: image/jpeg");
imagejpeg($row->myImage)

 

 

also see

imagepng

[The Little Guy]

basically you need to read the image in using a php file

 

then you need to use the image tag like so:

 

<img src="/my/php/file.php?filename=myimage.jpg&imageID=12" />

[MadTechie]

 

file image.php

$ID = (int)$_GET['id'];
//add connection string etc
$sql = "SELECT myImage FROM images WHERE id = $ID";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

//for JPEG
header("Content-type: image/jpeg");
imagejpeg($row->myImage)

Thats the whole file! no echoing in there as it will mess it up..

 

in another file use

<img src="/my/php/image.php?ID=12" />

 

as The Little Guy said

 

hope that sums it up

[JustinK101]

MadTechie:

 

I am getting the following errors in my image.php file:

 

Warning: Cannot modify header information - headers already sent by (output started at includes/makeImage.php:1) in includes/makeImage.php on line 31

 

Warning: imagejpeg(): supplied argument is not a valid Image resource in includes/makeImage.php on line 32

 

Here is my code:

 

<?php

if(!isset($_GET['id']) || empty($_GET['id']))
{
	return;
}

require_once("db_config.php");
require_once("db_connect.php");

function mysql_smart_quote($var)
{
   if (get_magic_quotes_gpc()) 
   {
	   $var = stripslashes($var);
   }
   
   if (!is_numeric($var))
   {
	   $var = "'" . mysql_real_escape_string($var) . "'";
   }
   return $var;
}

$sql = "SELECT product_images.image_thumb FROM product_images WHERE product_images.id = " . mysql_smart_quote($_GET['id']);
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

header("Content-type: image/jpeg");
imagejpeg($row->image_thumb);

?>

[cooldude832]

Wrote this script, it handles more than just jpgs

 

view image + its data page

<?php
require_once("functions.php");
    // again we check the $_GET variable
    if(isset($_GET['image_id']) && is_numeric($_GET['image_id'])) {
        $sql = "SELECT ImageType, ImageTitle, ImageCat, Height, Width, ImageName FROM Images WHERE ImageID=".$_GET['image_id'];
	connectSQL();
        $result = mysql_query($sql)  or die("Invalid query: " . mysql_error());
         while($row=mysql_fetch_array($result)) {
            echo "<h3>".$row['ImageTitle']."</h3>";
		echo "<img src=\"image.php?image_id=".$_GET['image_id']."&width=".$_GET['width']."\" alt=\"".$row['ImageName']."\" />";
		echo "<br/>Image Name: ".$row['ImageName'];
		echo "<br/>Category: ".$row['ImageCat'];
		echo "<br/>Image Type: ".$row['ImageType'];
		echo "<br/>Width: ".$row['Width']."px Height: ".$row['Height']."px";
	}
    }
    else {
        echo 'File not selected';
    }
?>

image.php

<?php
require_once("functions.php");
$id = $_GET['image_id'];
if(!empty($_GET['width'])){
$size = $_GET['width'];
}
else{
$size = 500;
}
if($id) {
connectSQL();
    $query = "select Image, ImageType from Images where ImageID = $id";
    $result = mysql_query($query) or die(mysql_error());
    $data = mysql_result($result,0,"Image");
    $type = mysql_result($result,0,"ImageType");
$type = "image/".$type;
    Header("Content-type: ".$type);   
    $src = imagecreatefromstring($data);
    $width = imagesx($src);
    $height = imagesy($src);
    $aspect_ratio = $height/$width;

    $new_w = $size;
    $new_h = abs($new_w * $aspect_ratio);


    $img = imagecreatetruecolor($new_w,$new_h);
    imagecopyresized($img,$src,0,0,0,0,$new_w,$new_h,$width,$height);
     // determine image type and send it to the client   
    if ($type == "image/pjpeg" || $type == "image/jpg" || type == "image/jpeg") {   
      imagejpeg($img);
    } else if ($type == "image/x-png" || $type = "image/png") {
      imagepng($img);
    } else if ($type == "image/gif") {
      imagegif($img);
    }
    imagedestroy($img);
}
?>

 

and the function connectSQL();

<?php
function connectSQL() {
//mysql connect and picks db
if(empty($connected)){
	$link = mysql_connect("", "", "") or die(mysql_error());
	$db = mysql_select_db("") or die(mysql_error());
	$GLOBALS['conncted'] = "yes";
}
}//End of connectSQL
?>

basically use view.php with the number and width and let it go

[JustinK101]

Ok, thanks for the code, but I think I want to stick with my code. Any idea why it is saying cannot modify header information?

[cooldude832]

odds are its whtite space since it says line 1

[JustinK101]

cooldude,

 

Yeah I dont get it though, I have the header call as the first thing on the page. How in the world do I do this?

 

<?php header("Content-type: image/jpeg");

if(!isset($_GET['id']) || empty($_GET['id']))
{
	return;
}

require_once("db_config.php");
require_once("db_connect.php");

function mysql_smart_quote($var)
{
   if (get_magic_quotes_gpc()) 
   {
	   $var = stripslashes($var);
   }
   
   if (!is_numeric($var))
   {
	   $var = "'" . mysql_real_escape_string($var) . "'";
   }
   return $var;
}

$sql = "SELECT product_images.image_thumb FROM product_images WHERE product_images.id = " . mysql_smart_quote($_GET['id']);
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

imagejpeg($row->image_thumb);

?>

[JustinK101]

Ok I think I am getting closer, the problem was that I was calling imagempeg($row->image_thumg); That wont work, so now I have it as:

 

imagejpeg(imagecreatefromstring($row->image_thumb));

 

But now I am getting the following error:

 

[function.imagecreatefromstring]: Data is not in a recognized format in includes/makeImage.php on line 33

[bache]

instead of using

 

imagejpeg(imagecreatefromstring($row->image_thumb));

 

you should write directly

 

echo $row->image_thumb;

[MadTechie]

how did you get the date into the database?

thats the real question, as your reverse that

[JustinK101]

Ok this is getting very annoying. I am still getting cannot modify header information error. The following is my exact code:

 

<?php 
if(!isset($_GET['id']) || empty($_GET['id']))
{
	return;
}

require_once("db_config.php");
require_once("db_connect.php");

function mysql_smart_quote($var)
{
   if (get_magic_quotes_gpc()) 
   {
	   $var = stripslashes($var);
   }
   
   if (!is_numeric($var))
   {
	   $var = "'" . mysql_real_escape_string($var) . "'";
   }
   return $var;
}

$sql = "SELECT product_images.image_thumb FROM product_images WHERE product_images.id = " . mysql_smart_quote($_GET['id']);
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

header("Content-type: image/jpeg");
echo $row->image_thumb;
?>

 

I don't understand why I am getting the cannot modify header error. Thanks guys.

[bache]

Are you sure you don't print something in db_config.php or db_connect.php and you don't have empty space before the opening tag <?php  ?

[JustinK101]

Yes absolutely no white space before the opening or closing php tags, I have triple checked, but it must be because it says the error is on line 1. If I move the opening php tag down a line, the error changes to line 2. SOOOOOO WEIRD.

 

As far as the db_config.php and db_connect.php here they are, and again I checked those files for no whitespaces.

 

This is the most fusterating thing ever.

 

db_config.php

<?php $db_loc = "localhost"; $db_user = "connect"; $db_pass = "mypasswordhere"; $db_name = "images"; ?>

 

db_connect.php

<?php $db = mysql_connect($db_loc, $db_user, $db_pass) or die("<p><b><font color=\"red\">Error:</font> " . mysql_error() . "</b></p>"); mysql_select_db($db_name) or die("<p><b><font color=\"red\">Error:</font>Cannnot Select Database '" . $db_name . "'.</b></p>"); ?>

 

Here is the bloody error message:

Warning: Cannot modify header information - headers already sent by (output started at includes/makeImage.php:1) in includes/makeImage.php on line 28

[MadTechie]

try this

 

<?php
$ID = (int)$_GET['id'];
if( $ID == 0 )
{
	return;
}

require_once("db_config.php");
require_once("db_connect.php");

$sql = "SELECT product_images.image_thumb FROM product_images WHERE product_images.id = $ID"
$result = mysql_query($sql) or die(mysql_error());
$row = @mysql_fetch_object($result);
$img = $row->image_thumb;
header("Content-type: image/jpeg");
//echo $img;
imagejpeg($img);
exit

[MadTechie]

updated (forgot some and too late to edit last post!

<?php
$ID = (int)$_GET['id'];
if( $ID == 0 )
{
	return;
}

require_once("db_config.php");
require_once("db_connect.php");

$sql = "SELECT product_images.image_thumb FROM product_images WHERE product_images.id = $ID";
$result = mysql_query($sql) or die(mysql_error());
$row = @mysql_fetch_object($result);
$img = $row->image_thumb;
header("Content-type: image/jpeg");
//echo $img;
imagejpeg($img);
exit;
?>

[JustinK101]

Ok, so I copyied my exact code and pasted it into a brand new text document with wordpad. Then I renamed the document from .txt to .php and uploaded and it worked. It seems Dreamweaver must put a special character in the file, which makes no sense because when I open up the file I created with dreamweaver in wordpad I don't see any special characters. Honestly that is stupid, dreamweaver must be inserting a special character that I cant see even with wordpad.

[dbillings]

you could use ob_start() at the top of the page. then ob_end_flush() after your echo $row->image_thumb.

 

P.S. Have never used output buffering before so don't attack me if I'm wrong, although I'm fairly certain it should work.

 

<?php
ob_start(); 
if(!isset($_GET['id']) || empty($_GET['id']))
{
	return;
}

require_once("db_config.php");
require_once("db_connect.php");

function mysql_smart_quote($var)
{
   if (get_magic_quotes_gpc()) 
   {
	   $var = stripslashes($var);
   }
   
   if (!is_numeric($var))
   {
	   $var = "'" . mysql_real_escape_string($var) . "'";
   }
   return $var;
}

$sql = "SELECT product_images.image_thumb FROM product_images WHERE product_images.id = " . mysql_smart_quote($_GET['id']);
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_object($result);

header("Content-type: image/jpeg");
echo $row->image_thumb;
             ob_end_flush();
?>

[JustinK101]

Ok,

 

I am wondering how is is possible to do what I have done above, i.e.

 

<img src="includes/makeImage.php?id=6">

 

Work with an AJAX call. For example, I only want to query the image out of the DB and display it,  if a user clicks a button or any JS event for that matter. I know how to do the JS code:

 

<input type="button" name="clickMe" value="Click Me" onclick="requestImage(6);" />

 

Also in the header of the page I have:

 

<script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript">
var returnValue;

function requestImage (id) {
     var myUrl = 'includes/makeImage.php';
     var myPars = 'id=' + id;
     var myAjax = new Ajax.Request (myUrl, {method: 'get', parameters: myPars, onLoading: showLoad, onComplete: showResponse});
     return returnValue;
}

function showLoad() {
     //Do nothing for now 
}

function showResponse(originalRequest) {
     returnValue = originalRequest.responseText;
}
</script>

 

So that js code works perfect except the problem now lies with php. What is returned from that AJAX call is just a big messy nasty string filled with the binary data of the image. How do I acutally take that and make an image?

 

Will doing this work?

<img src="javscript: requestImage(6);">

[MadTechie]

use

imagejpeg($imgdata, $filename);

[JustinK101]

Can you perhaps give an example using the button and an image.

 

For example:

 

<input type="button" name="clickMe" value="Click Me" onclick="$(myImage).src = requestImage(6);">

<img src="" id="myImage">

 

Would that work? Sorry I dont follow.

[MadTechie]

OK, after re-reading a few posts..

 

your using AJAX to pull the image.. first off the ajax call shouldn't pull the image but a html string to display the image,

 

So ignore the last post..

 

but as for

 

<input type="button" name="clickMe" value="Click Me" onclick="requestImage(6);" />

 

what would you expect that to do ?

Request Image(6) to do what ?

 

heres what i think your after!

<script language="javascript">
function showimage(ID)
{
document.getElementById('imgTest').src = "includes/makeImage.php?id="+ID;
}
</script>
<img id="imgTest" src="" />

<input type="button" name="clickMe" value="Click Me" onclick="showimage(6);" />

 

[JustinK101]

Would this run the query at runtime, I dont think so right?

 

document.getElementById('imgTest').src = "includes/makeImage.php?id="+ID;

 

My goal is to not run the query, unless an event is triggers, and do all this without page-reloads.

[MadTechie]

that will display an image without a refresh..

the script itself will not run the sql query but the makeImage.php will and as that will be used to display the image, in a word every image will run a sql query, thats how your makeImage.php has been designed