PHP Mysql - Image not displaying on browser (broken image)

I'm making an upload application and I have a script that once the images are uploaded they are resized but the original dimensions are stored to be used later on. the index.php should should show the images on the screen.

I've stored the image path instead of a blob on the database and using the 'path' variable to show it on the browser.

The search works but the images are not displaying and I can't find the reason why.

Im new to php/mysql so any help is appreciated on why my images are not showing up.

upload.php

<?php

require_once 'includes/config.inc.php';
require_once 'includes/functions.php';

// Add the heading to output
$output = '<h1>Gallery</h1>';

// Echo the gathered output
echo $output;

// Include the HTML header
include_once 'includes/head.html';

// Check if the form has been submitted...
if (isset($_POST['fileupload']) 
    && isset($_POST['title']) && isset($_POST['description'])) {

    $title = $_POST['title'];
    $description = $_POST['description'];

    if (is_uploaded_file($_FILES['userfile']['tmp_name'] )) {       
        $updir = dirname(__FILE__).'/uploads/';
        //$upfilename = $_FILES['userfile']['name'];
        $ext=end(explode(".", $_FILES['userfile']['name']));//gets extension
        $newname = $updir.$title;
        $tmpname = $_FILES['userfile']['tmp_name'];
        $newimage = $newname.'.'.$ext;
        $path = $newimage;

        //if file is an image, upload it
        if($_FILES['userfile']['type'] ==  'image/jpeg'){
    if (move_uploaded_file($tmpname, $newimage)) {
        //print if file was uploaded        
            //echo 'File successfully uploaded';
            list($width, $height) = getimagesize($newimage);
            //Add values to the DB
            $sql = "INSERT INTO Images VALUES(NULL, '$title', '$description', '$width', '$height', '$path')";
            $result = mysqli_query($link, $sql);
            if(!$result) die ("Database access failed: " . $link->error);
            $w = $width;
            $h = $height;
            resize($newimage, $width, $height);
            }
            } else {
        //print if file failed
            echo 'File upload failed';
            }
            }
            //echo debug();
            }
// Include the HTML footer
?>

index.php(The sql script is here)

<?php
require_once 'includes/config.inc.php';
require_once 'includes/functions.php';

if (!isset($_GET['page'])) {
 $id = 'home'; // display home page
} else {
 $id = $_GET['page']; // else requested page
}

switch ($id) {
    case 'home' :
        include 'uploads.php';
        break;
    default :
        include 'views/404.php';
}

$sql = 'SELECT * FROM Images';
$result = mysqli_query($link, $sql);
if(!$result){
die(mysqli_error($link));
}else{
while($row = mysqli_fetch_array($result)){
    echo '<div><a href= "#">
            <img src="'.$row['path'].'" width=150 height=150 alt="'.$row['title'].'" /></a></div>';
}
mysqli_free_result($result);
}
/*
Alternative way of showing the right images
$images = glob('uploads/*.jpg');
for($i = 0; $i < count($images); $i++){
    list($w,$h) = getimagesize($images[$i]);
    $allimages = $images[$i];

echo  '<div><a href="'.$allimages.'">
 <img src="'.$allimages.'" width="'.$w.'" height="'.$h.'" alt="" /></a>
            </div><br/>';
    }*/
    include_once 'includes/footer.html';
?>

Solution

The problem is that you are using dirname(__FILE__) for the start of the path of your image and store that complete path in the database.

According to the manual dirname:

Returns the path of the parent directory.

And __FILE__:

The full path and filename of the file with symlinks resolved.

So you are storing your image using a absolute path on the local file system of the server.

However, that absolute path is not absolute relative to the root of the web-server so the browser will not find the images.

The solution is to use an absolute path when you move the uploaded image, but store a path that is absolute relative to the root of the web-server.

In your case you can probably use the /uploads/ path for that although that would depend on the exact file structure:

...
// no dirname here
$updir = '/uploads/';

//$upfilename = $_FILES['userfile']['name'];
$ext=end(explode(".", $_FILES['userfile']['name']));//gets extension
$newname = $updir.$title;
$tmpname = $_FILES['userfile']['tmp_name'];
$newimage = $newname.'.'.$ext;
$path = $newimage;

//if file is an image, upload it
if($_FILES['userfile']['type'] ==  'image/jpeg'){

    // only use dirname() here
    if (move_uploaded_file($tmpname, dirname(__FILE__) . $newimage)) {
        ...