Display an image from a MySQL database with PHP

Question

I am trying to display an image from a MySQL database on a webpage using PHP.
I am aware that this is not the most efficient method, but still I would like to see how it is done....

To insert the image into the database I am using this code:

//Get File 
File file = new File("C:\\Users\\blah\\blah\\blah\\WebcamImage\\" + name);
FileInputStream fileStream = new FileInputStream(file);

//Prepared Statement
pStmt = connection.prepareStatement("INSERT INTO table (webcamPic1) values (?)");
pStmt.setBinaryStream(1, fileStream, (int) file.length());
pStmt.executeUpdate();

To display the image on the website, I currently have this PHP code:

$result = mysqli_query($con,"SELECT * FROM table");

header('Content-Type: image/jpeg;');

echo "<table border='1' title='WEBCAM'>
    <caption>WEBCAM</caption>
    <tr>
    <th>WEBCAM 1</th>
    </tr>";

while($row = mysqli_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['webcamPic1'] . 
    "</td>";
    echo "</tr>";
}
echo "</table>";

mysqli_close($con);

On the webpage the file is displayed as a mess of symbols, like this:

ÿØÿàJFIFÿÛC $.' ",#(7),01444'9=82<.342ÿÛC
2!!22222222222222222222222222222222222222222222222222ÿÀz£!ÿÄÿÄC!1AQa"q2‘¡±Á#Bá3RÑðbrñ$4CSc¢s’“ÂÒÿÄÿÄ(!1AQa"2q‘¡ðBÿÚ?ûö„ã=–Ù0Xa˜@•7BÀÙ”BTà÷@DÂ.€Å¬´ 7……Óc¨L1„¡£ì·2€Ä#?tû7A‘öTl¢ƒÂeEUn@BØ@r°@Â%TCŠ(€±@,±@#„” RBÔB‘Â }’¢µ!•HHá›'±'')DÝ”%@Í7 Ì((hTm¥)U æð¦[ì¨‘6HE¾Pl%sA"æ[ÔûJ¨‹©OHh°7s Iáp€Ñ¨":µþ¦³Ó÷5¨Ò¼Ñ©ÿí÷]'âäŸöG'àèVqw«ý&Çì¹êøY&'¡Y²ñ¹Wg)±Âï ‡·òYCÿ_¥4÷NÜ.m˜,ƒ„¨g²3öEdÃBžrº¿^·º á•Flˆ!5Õ„NxZ0ˆP…¯>ê¨¢ ¡Aº£eFYD-!E•)Â‚ÓÙ›!•Xª2^Pct§•B‘ tŽmÐ) e¨$B‹ÇQ¥•V¹Af:EøU”£ Kð®¡OµÒk 8)œ•r›lØýÕ²Ð¢êRˆçÔm¡HÔp0,¹qàé[¢h~³kêäRË)vîîë·ãžØåßD«YpÕ«+ÑÆ9× gƒž0ºü;\ÚÕ›Pá$C“Ð÷Sòðùqþ‰ÇŸÇ“Ó>Âg=Ö^z>UëL”Àñu0ÇdgªŠåü‘Y8„%0@@dÃ(0ˆˆ¼ +| ×œ¦‚xEY„£÷TˆƒÙÁ[¿T-•” ìUYˆ?+ <#‰ESŽot‹€è(*Â4 E•jRBƒÂ ¸YEÌIÌ ¨°((×BèkïÑA@dvYX€”‰TIÀ©Pm·”ûP

Obviously I am doing something very wrong. What is the correct way to display the true image?

Thank you.

Why don't you just store the path of the pic and then save the pic in a folder on the server? Then you have a lot less code in your database. — Oliver Nybroe
– Oliver Nybroe, Commented Nov 16, 2014 at 16:22
@Boann And a lot cheaper, as if you don't host yourself, then database storage is a lot more expensive then normal storage- — Oliver Nybroe
– Oliver Nybroe, Commented Nov 16, 2014 at 16:30

Marcin Orlowski · Accepted Answer · 2014-11-16 16:55:10Z

4

You are mixing two different contents in single HTTP response - it does not work that way and you cannot send HTML and images combined as HTTP does not support multiplexing (SPDY does for example). So this is wrong in the way you do it as browser does NOT expect this and is unable to separate one from the other considering all data it receives in this response as HTML document, hence garbage you seeing as it expects text and handles it all as such. To do this right way, you should have separate PHP script that will return image content, but the request for it should come from browser. So you should just return URL to your image script in SRC for image:

<img src="image.php">

and output image from image.php if so.

Also your code current code makes no sense from other reason too:

header('Content-Type: image/jpeg;');
echo "<table border='1' title='WEBCAM'>

since HTML is NOT image/jpeg type.

PS: storing images in database is considered very bad idea. Store images on disk and keep references to it in your db records only.

edited Nov 16, 2014 at 16:55

answered Nov 16, 2014 at 16:20

Marcin Orlowski

75.7k11 gold badges128 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

J4C3N-14 Over a year ago

Ok so I can see that I am going about this the wrong way. How would you put the images up onto a webpage? I have the image saved in folder on my computer so how should I get that up to the webpage? any guidance would be greatly appreciated.

Marcin Orlowski Over a year ago

Not on your computer. You need to have image on your webserver. Iam saying that you should resist from storing it in database. You should have i.e. images/ folder and put all image files there and then just store links to give images in DB if you need. This is much better because image is served by your webserver so i.e. browser can skip fetching images if it already has them in cache. Your code is not supporting this so you serve all images no matter what. This is bandwidth waste, etc.

J4C3N-14 Over a year ago

Thank you Marcin, I am going to revisit this and follow your guidance.

Lukasz Piwowar · Accepted Answer · 2014-11-16 21:14:27Z

0

There is way to this try something like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

data uri notation should do the job.

last part of the uri i base64 encoded image. So You just should get Your image data from database encode it with base64_encode and then return it to the browser

For more details check this: http://en.wikipedia.org/wiki/Data_URI_scheme

answered Nov 16, 2014 at 21:14

Lukasz Piwowar

462 bronze badges

Collectives™ on Stack Overflow

Display an image from a MySQL database with PHP

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related