Displaying Image Stored in a Directory on the Server using PHP

Question

I have an image stored in a directory on my server. Want to use PHP code to display it on the browser; something is wrong with my code. Please help.

<?php
$image = fopen('upload/foto4.JPG', 'r');
$Data = fread($image,filesize('$image'));
fclose($image);
echo"<div style='width:15%;height:10%;position:relative;top:22%;left:20%'/>".$Data."</div>";
?>

Answer 1

fread will not add the code to display the picture, it only shows the data that is in the file... What you want to do is display a page with an img tag, and its source pointing to your image file, or serve it using php:

echo"<div style='width: 15%; height:10%; position:relative; top:22%; left:20%'/><img src='uploads/foto4.JPG'/></div>";
// Or
echo"<div style='width: 15%; height:10%; position:relative; top:22%; left:20%'/><img src='uploads.php?f=foto4.JPG'/></div>";

If you use the second solution, see it points to a php file... All your uploads would be handled by your PHP that way if you want to control access or other stuff...

//uploads.php
header('Content-Type: image/jpeg'); // We are serving a jpeg. 
readfile('uploads/'.$_GET['f']);

EDIT: Finally, one could use the data URI scheme to show the picture inline, this method would fit perfectly for your code snippet but might not be required as not all browsers support it (but all majors do). Read more at http://www.websiteoptimization.com/speed/tweak/inline-images/

<?php
$image = fopen('upload/foto4.JPG', 'rb');
$Data = fread($image,filesize('$image'));
fclose($image);
echo'<div style="width:15%;height:10%;position:relative;top:22%;left:20%"/><img src="data:image/jpeg;base64,'.base64_encode($Data).'"/></div>';
?>

Answer 2

If you have just one image you can do something like that:

$image = glob("directory/*.jpg");
echo "<img src='directory/".$image."'>";

Answer 3

You forgot the html img tag

    <?php
$image = fopen('upload/foto4.JPG', 'r');
$Data = fread($image,filesize('$image'));
fclose($image);
echo"<div style='width: 15%; height:10%; position:relative; top:22%; left:20%'/><img src="". $Data."" /></div>";
?>