By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,190 Members | 833 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,190 IT Pros & Developers. It's quick & easy.

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

P: 17
how can i display both image and other information in the web page using php?
i'm using mysql database.
I do displaying the image only but i want to display both other information from the database and the image from the database also in one web page...
how can i do this?

pls help.....

Nov 24 '09 #1
Share this Question
Share on Google+
6 Replies

Expert 5K+
P: 5,058

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:
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. // Fetch a list of images from the database.
  3. // Note, this doesn't actually fetch the image,
  4. // only the information about the image and the ID.
  5. $sql = "SELECT  id, title, description
  6.         FROM    image
  7.         LIMIT   0, 10";
  8. $result = mysql_query($sql) or die(mysql_error());
  10. // Print a table, listing all the images
  11. echo '<table>';
  12. while($row = mysql_fetch_assoc($result))
  13. {
  14.     // Add the image data inot the row.
  15.     // Note how I use the <img> tag there.
  16.     echo <<<HTML
  17. <tr>
  18.     <td>{$row['title']}</td>
  19.     <td><img src="getImage.php?id={$row['id']}" alt="{$row['title']}" /></td>
  20.     <td>{$row['description']}</td>
  21. </tr>
  22. HTML
  23. }
  24. echo '</table>';
  25. ?>
Where "getImage.php" is the PHP file that fetches and displays the image.
(See this article to see the theory behind that part)
Nov 24 '09 #2

P: 17
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.
Nov 25 '09 #3

Expert 5K+
P: 5,058
Sorry for the delayed response. Been busy.

You could in-line the image data into the <img> src attribute.
For example:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Image Inline test</title>
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     </head>
  7.     <body>
  8.         <div>
  9.             <h3>There should be an image right below this...</h3>
  10.             <?php
  11.                 $source_image = 'test.png';
  12.                 $raw_data = file_get_contents($source_image);
  13.                 $base64_data = base64_encode($raw_data);
  14.             ?>
  15.             <img src="data:image/png;base64,<?php echo $base64_data; ?>" alt="Test Image" />
  16.         </div>
  17.     </body>
  18. </html>
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".
Nov 27 '09 #4

P: 17
hi atli, where does the test.png from? i have my image save in the mysql database and save as longblob.
Dec 1 '09 #5

P: 17
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.
Dec 1 '09 #6

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

You can get the ideas from here:

I hope it helps. :)
Dec 1 '09 #7

Post your reply

Sign in to post your reply or Sign up for a free account.