[SOLVED] Image not displaying on web page

jfraymondpa · 03-15-2011, 08:29 PM

I'm using the "Beginning PHP5, Apache, MySQL Web Development" book from WROX to teach myself these processes. I'm a retired programmer and trying to keep my brain active.

I've been able to get through most of the process and get things to work.
But getting a picture upload and then display it is killing me.
The picture is moved from the initial directory and placed in the destination but will not show on the web page, I get a place holder and all the information about the picture, but no pic.
The MySQL is processing all the database stuff okay.
I haven't a clue what is not working, Firefox, Apache or what.
I'm running Fedora 14.

Here is the code I'm using:

Code:

upload_image.php

<html>
<head>
<title>Upload your pic to our site!</title>
</head>
<body>

<form name="form1" method="POST" action="check_image.php" 
    enctype="multipart/form-data">

<table border="0" cellpadding="5">
  <tr>
    <td>Image Name or Caption<br>
      <em>Example: You talkin' to me?</em></td>
    <td><input name="image_caption" type="text" id="item_caption" size="55" 
          maxlength="255"></td>
  </tr>
  <tr>
    <td>Your Username</td>
    <td><input name="image_username" type="text" id="image_username" size="15" 
          maxlength="255"></td>
  </tr>
    <td>Upload Image:</td>
    <td><input name="image_filename" type="file" id="image_filename"></td>
  </tr>
</table>
<br>
<em>Acceptable image formats include: GIF, JPG/JPEG, and PNG.</em>
<p align="center"><input type="submit" name="Submit" value="Submit">
  &nbsp;
  <input type="reset" name="Submit2" value="Clear Form">
</p>
</form>
</body>
</html>

check_image.php

<?php

//connect to the database
$link = mysql_connect("localhost", "#####", "**********")
  or die("Could not connect: " . mysql_error());
mysql_select_db("MovieSite", $link) 
  or die (mysql_error());
?>
<pre>
<?php
  echo "<br>_POST<br>"  ;
  print_r($_POST);
  echo "<br>_FILES<br>";
  print_r($_FILES);
  echo "<br>";
?>
</pre>
<?php

//make variables available
$image_caption = $_POST['image_caption'];
$image_username = $_POST['image_username'];
$image_tempname = $_FILES['image_filename']['name'];
$today = date("Y-m-j");

echo "<br>image_tempname: " . $image_tempname;
echo "<br>";

//upload image and check for image type
$ImageDir ="/var/www/images/";
$ImageName = $ImageDir . $image_tempname;

echo "<br>ImageName: " . $ImageName;
echo "<br>";

if (move_uploaded_file($_FILES['image_filename']['tmp_name'], 
                      $ImageName)) {

			echo "<br>File Moved";
  //get info about the image being uploaded
  list($width, $height, $type, $attr) = getimagesize($ImageName);

 if ($type > 3) {
  echo "Sorry but the file you uploaded was not a GIF, JPG or PNG file.<br>";
  echo "Please hit your browser's 'back' button and try again.";
 } else {
   //image is acceptable; ok to proceed

 //insert info into image table

  $insert = "INSERT INTO images
            (image_caption, image_username, image_date)
            VALUES
            ('$image_caption', '$image_username', '$today')";
  $insertresults = mysql_query($insert)
    or die(mysql_error());

  $lastpicid = mysql_insert_id();
    echo "<br>lastpicid: ". $lastpicid;
    echo "<br>";
 }//endif
    
    $newfilename =  $ImageDir . $lastpicid . ".jpg";
    
    echo "<br>newfilename: ". $newfilename;
    echo "<br>";

 if ($type == 2) { //jpg
  rename($ImageName, $newfilename);
 } else { //either gif or png and must convert
   if ($type == 1) { //gif
      $image_old = imagecreatefromgif($ImageName);
   } elseif ($type == 3) { //png
      $image_old = imagecreatefrompng($ImageName);
   } //endif
   //convert the image to jpg
   $image_jpg = imagecreatetruecolor($width, $height);
   imagecopyresampled($image_jpg, $image_old, 0, 0, 0, 0, 
		    $width, $height, $width, $height);
   imagejpeg($image_jpg, $newfilename);
   imagedestroy($image_old);
   imagedestroy($image_jpg);
 } //endif
 
$url = "location: showimage.php?id=" . $lastpicid;
header($url);
 
}

?>

showimage.php

<?php

//connect to the database
$link = mysql_connect("localhost", "#####", "**********")
  or die("Could not connect: " . mysql_error());
mysql_select_db("MovieSite", $link) 
  or die (mysql_error());


//make variables available
$id = $_REQUEST['id'];

//get info on the pic we want
$getpic = mysql_query("SELECT * FROM images WHERE image_id = '$id'")
  or die(mysql_error());
$rows = mysql_fetch_array($getpic);
extract($rows);

$image_filename = "/var/www/images/" . $image_id . ".jpg";

list($width, $height, $type, $attr) = getimagesize($image_filename);

?>

<html>
<head>
<title>Here is your pic!</title>
</head>
<body>
<p>Here is the picture you just uploaded to our servers:</p>
<img src="<?php echo $image_filename; ?>" ALT="A picture" align="left" 
  <?php echo $attr; ?> >
<strong><?php echo $image_caption; ?></strong><br>
It is <?php echo $width; ?> pixels wide and 
      <?php echo $height; ?> pixels high.<br>
It was uploaded on <?php echo $image_date; ?> 
by <?php echo $image_username; ?>.
</body>
</html>

All my code resides in the Apache DocRoot directory - /var/www/html
and the images directory is /var/www/images

Any help will be greatly appreciated as I'm beating my head on the wall with this one.

I've attached what the page looks like.

Thanks,
John

legacyprog · 03-15-2011, 09:38 PM

From your screen capture I see you're using Firefox, and on that browser the menu command to see the raw HTML it received over the wire is View - Page Source. Did you do that to see what is inside the quote marks for the IMG tag? I say that not because I am sure you have a problem there, but only because it would be the next thing I would do. I would also wonder about file permissions. You said the image was moved to the /var/www/images folder but you didn't say if you did chmod.

Please be aware that I seldom can answer zero reply questions because my Linux isn't good enough. If nobody else has answered, it's unlikely I'll be able to. So take my advice with a grain of salt.

By the way I am a 35 year COBOL programmer but not yet (financially) ready for retirement.

bryan641 · 03-15-2011, 09:50 PM

Quote:

Originally Posted by jfraymondpa

Code:

$image_filename = "/var/www/images/" . $image_id . ".jpg";

list($width, $height, $type, $attr) = getimagesize($image_filename);

?>

<html>
<head>
<title>Here is your pic!</title>
</head>
<body>
<p>Here is the picture you just uploaded to our servers:</p>
<img src="<?php echo $image_filename; ?>" ALT="A picture" align="left" 
  <?php echo $attr; ?> >

John,
Based on how you're using $image_filename, it looks like the fully qualified path from root. But the "src=" attribute of the <img> tag requires the path be based off of the webserver's document root, which is probably "/var/www". So $image_filename for the <img> tag should be

Code:

$image_filename = "/images/" . $image_id . ".jpg";

--Bryan

jfraymondpa · 03-16-2011, 10:43 AM

Thanks for the replys.
Legacy --I've looked at the permissions, all directories are read/write for all and the images are stored with read for all. I attached that shot so the holder for the image would show. I'm attaching the view-page source,
Did COBOL years and years ago, forgotten it's still being used.

Bryan - Tried the directory change, but that causes a failure in the code. I've tried "/../images/" and "../images/" neither of them work either. The only thing is "/var/www/images/", when I use that then the code processes correctly, but the image does not display.

Still beating my head on the wall.
John

LinuxBoxSolution · 03-16-2011, 11:52 AM

Looking at your last screen shot you do not want the image source to have '/var/www/images/30.jpg' you want your final code to show '/image/30.jpg'

If fixing the path doesn't work then follow the below instructions.

Have you checked your server setting to make sure gdlib is installed on your system. I don't know if you even have access to use the command line for the system but if you do have command line access try:

Code:

yum install -y php-gd gd-devel glib glib2 libjpeg libtiff ghostscript freetype ImageMagick ImageMagick-perl

Copy and Paste the code above in the command line. If you need to know how to SSH into your machine try this.

1. Download Putty from putty.org Download the version that best suites your needs and OS.
2. Open Putty and type your domain name where the Server goes, and leave the port set at 22 unless you have or your isp has changed it for some other reason.
3. If putty connects you'll get a command line asking for a user name and password. Put in your current user name and password to either login to the machine or that you use to login into the administration panel for your web server.
4. Copy and paste the command above. If you have access and are allowed to use yum, yum will begin downloading and installing the software and libraries.
5. Now restart apache by issuing service httpd restart or service apache2 restart depending on the distro of linux.
6. Try reloading the page with the images. Hopefully it will work.

P.S. If this doesn't work I'll need to know a little more about the machine you are trying to host from. Also I couldn't post any links yet because this is my first post on this account.

jfraymondpa · 03-16-2011, 12:54 PM

This is what I'm running.
The Apache server is running on my system. I am totally stand-alone.
I've tried all the suggestions and still no where.

What is confusing is when I right click on the image place holder and select "view image" I get "404 error". Attached is the screen shot of that page source and the screen shot when I click on the "src" link. The path and file name are correct.
I'm sure it has to do with the path.

My http.conf document root is: DocumentRoot "/var/www/html"

Again I've tried all the various suggestions for changing the path, but the only one that runs my code to completion is "/var/www/images/".

John

LinuxBoxSolution · 03-16-2011, 01:17 PM

The reason you can right click on the image that doesn't show and see properties is because the properties get set in the code here:

Code:

<img src="/var/www/images/30.jpg" ALT="A picture" align="left" width="400" height="428" >

You say your document root is set to /var/www/html

Quote:

My http.conf document root is: DocumentRoot "/var/www/html"

Now Look at your source code that shows when the webpage displays

Code:

<img src="/var/www/images/30.jpg" ALT="A picture" align="left" width="400" height="428" >

Quote:

My http.conf document root is: DocumentRoot "/var/www/html"

For one your code does not display the html part of your root directory.
If the html directory doesn't exist then create it. Now if you are trying to access the images folder below the root directory you must make sure the owner of the file has permission to go below the /var/www/html directory
Either chown the owner of the script to a user that can access below the root directory, or you may try to give the current user permissions to go below the root directory or the easiest would be to reconfigure your script to upload, access and display images from the /var/www/html/images directory. By doing this you are still following tutorial guidelines in keeping the absolute path and not relative.

jfraymondpa · 03-16-2011, 01:33 PM

Okay, got it now.

I moved my "images" directory into the Document Root directory (/var/www/html) and change the "$ImageDir ="/var/www/images/"; to $ImageDir =images/";

Thanks to all who replied.
John

bryan641 · 03-16-2011, 01:38 PM

Quote:

Originally Posted by jfraymondpa

Bryan - Tried the directory change, but that causes a failure in the code. I've tried "/../images/" and "../images/" neither of them work either. The only thing is "/var/www/images/", when I use that then the code processes correctly, but the image does not display.

You're using $image_filename twice. One place it must be the fully qualified path off the root:

Code:

$image_filename = "/var/www/images/" . $image_id . ".jpg";
list($width, $height, $type, $attr) = getimagesize($image_filename);

But in an <img> tag it must be relative to the document root.

If I understood correctly, you're placing the images outside of the document root, so you can't just reference them in the <img src=""> tag unless you create a link within your document root that point back to your images folder.

Another option is to create a .php script that reads the image data and returns it, then reference the .php script in the <img src=""> tag. A little extra work.
--Bryan

Quote:

I moved my "images" directory into the Document Root directory (/var/www/html) and change the "$ImageDir ="/var/www/images/"; to $ImageDir =images/";

... or do that.

LinuxBoxSolution · 03-16-2011, 01:41 PM

glad to hear it dont forget to add to the rep please

jfraymondpa · 03-16-2011, 01:54 PM

Quote:

Originally Posted by LinuxBoxSolution

glad to hear it dont forget to add to the rep please

Not sure what you want.

repo · 03-16-2011, 01:56 PM

Quote:

glad to hear it dont forget to add to the rep please

Please don't beg for rep's

Kind regards