Display an image from a MySQL database with PHP - 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.

Answer 1

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.

Answer 2

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