How to display both an Image and Data from a MySQL database in the same page.

**Atli** · Nov 24 '09, 03:02 PM

Hey.

In order to display the image data from the database, it has to be printed by itself, as the image it represents. Which means it has to be fetched and printed by itself in a request that imitates an image.

We generally do what you are asking like so:
[code=php]
<?php
// Fetch a list of images from the database.
// Note, this doesn't actually fetch the image,
// only the information about the image and the ID.
$sql = "SELECT id, title, description
FROM image
LIMIT 0, 10";
$result = mysql_query($sq l) or die(mysql_error ());

// Print a table, listing all the images
echo '<table>';
while($row = mysql_fetch_ass oc($result))
{
// Add the image data inot the row.
// Note how I use the <img> tag there.
echo <<<HTML
<tr>
<td>{$row['title']}</td>
<td><img src="getImage.p hp?id={$row['id']}" alt="{$row['title']}" /></td>
<td>{$row['description']}</td>
</tr>
HTML
}
echo '</table>';
?>
[/code]
Where "getImage.p hp" is the PHP file that fetches and displays the image.
(See this article to see the theory behind that part)

**msmjsuarez** · Nov 25 '09, 12:30 AM

How to display both an Image and Data from a MySQL database in the same page.

Thank you for the idea atli but is there a possibility to display both the image and the data in one web page only using php? thats what i want to do here.
thanks.

**Atli** · Nov 27 '09, 02:17 AM

Sorry for the delayed response. Been busy.

You could in-line the image data into the <img> src attribute.
For example:
[code=php]<!DOCTYPE html>
<html>
<head>
<title>Image Inline test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<h3>There should be an image right below this...</h3>
<?php
$source_image = 'test.png';
$raw_data = file_get_conten ts($source_imag e);
$base64_data = base64_encode($ raw_data);
?>
<img src="data:image/png;base64,<?ph p echo $base64_data; ?>" alt="Test Image" />
</div>
</body>
</html>[/code]

This works in all the real browsers, but - shockingly - it doesn't work IE7 or lower, as well as any current version of Outlook. (Which is a shame, seeing as how useful this could be in constructing Emails.)

In any case, you are going to want to avoid that in most situations. Loading the images separate from the main page is preferable in most cases. It allows the browser to cache the images separately, and to load the layout of the site before actually loading the images, making it feel "snappier".

**msmjsuarez** · Dec 1 '09, 12:57 AM

How to display both an Image and Data from a MySQL database in the same

hi atli, where does the test.png from? i have my image save in the mysql database and save as longblob.

**msmjsuarez** · Dec 1 '09, 01:04 AM

How to display both an Image and Data from a MySQL database in the same page.

My mysql database table contain these following data: id, lastname, familyname, image..
In the image is where i save my image with the type of longblob...
In the browser i want to display the id, lastname, familyname and the image of the specific person.
Any php codes in doing this please...thanks a lot.

**msmjsuarez** · Dec 1 '09, 03:42 AM

Thanks atli, i got it already...:)

You can get the ideas from here: http://www.phpbuilder.com/board/arch...-10309025.html

Bytes.com - Rate Limit Exceeded

http://bytes.com/topic/php/answers/735642-how-view-image-mysql-usin-php-case

I hope it helps. :)

How to display both an Image and Data from a MySQL database in the same page.

How to display both an Image and Data from a MySQL database in the same page.

Comment

Comment

Comment

Comment

Comment

Comment