Can't seem to display image from folder on server

This site is best viewed in a modern browser with JavaScript enabled.

Can't seem to display image from folder on server

ralston3

So I'm trying to display images that users upload on the home page. However, while the other info (description, title, username, date variables) shows up fine, the image will not show up for some reason.

Here is the code on my home/index.php page :

<!doctype html>
<html>
<head>

<?php

include('header.php');

?>

<title>Splindr</title>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>

<div id="contentWrapper">

	<?php 

	$conn = mysqli_connect("localhost","root","") or die ("No SQLI");
			mysqli_select_db($conn, "sample") or die ("No DB");

	$sqli = "SELECT * FROM `photos` WHERE `username` = 'ralston3'";

	$result = mysqli_query($conn, $sqli) or die ("No query");

	while($row = mysqli_fetch_assoc($result))	{
		$username = $row['username'];
		$title = $row['title'];
		$description = $row['description'];
		$image_name = $row['image_name'];
		$image_id = $row['image_id'];
		$date = $row['post_date'];
	}

	$image_id = $image_id;

	echo "<div id='photo'><div id='image'><img src='$image_id'><div    id='info_header'>$title &nbsp by &nbsp $username &nbsp on &nbsp $date   </div><div id='imageInfo'>$description</div></div></div>";

	?>

    </div>
</body>
</html>

I'm trying to work this so that when users upload their picture, the picture gets displayed on the homepage. Like I said, all other info displays properly except the image.

ginerjm

What IS the value of 'image_id'?

ralston3

@gineerjm I actually figured out the problem and corrected it with this :

</head>
<body>

<div id="contentWrapper">

	<?php 

	$conn = mysqli_connect("localhost","root","") or die ("No SQLI");
			mysqli_select_db($conn, "sample") or die ("No DB");

	$sqli = "SELECT * FROM `photos` WHERE `username` = 'ralston3'";

	$result = mysqli_query($conn, $sqli) or die ("No query");

	while($row = mysqli_fetch_assoc($result))	{
		$username = $row['username'];
		$title = $row['title'];
		$description = $row['description'];
		$image_name = $row['image_name'];
		$image_id = $row['image_id'];
		$random_directory = $row['random_direc'];
		$date = $row['post_date'];
	}

	$image_info = "http://localhost/splindr_2.0/photos/$random_directory/$image_id";

	echo "<div id='photo'><div id='actual_image'><img src='$image_info'><div id='info_wrapper'><div id='info_header'>Title: $title &nbsp By: $username &nbsp Date: $date</div><div id='description'>$description</div></div></div></div>"

	?>


    </div>

</body>
</html>

But when I upload a new post(image) as the same user, instead of producing both images on the home page, instead it exchanges the image, so only that 1 image shows. How can I get multiple images to display in the index.php(home) page, without them swapping each other out. My code is above. Thanks

ginerjm

Your query brings in possible multiple records for the current username value. But your processing of the results only yields the last record retrieved. You need to imbed your html output into the while loop like this:

echo "<body>";
$image_info = "http://localhost/splindr_2.0/photos/$random_directory/$image_id";
$conn = mysqli_connect("localhost","root","") or die ("No SQLI");
mysqli_select_db($conn, "sample") or die ("No DB");
$sqli = "SELECT * FROM `photos` WHERE `username` = 'ralston3'";
$result = mysqli_query($conn, $sqli) or die ("No query");
while($row = mysqli_fetch_assoc($result))	
{
	$username = $row['username'];
	$title = $row['title'];
	$description = $row['description'];
	$image_name = $row['image_name'];
	$image_id = $row['image_id'];
	$random_directory = $row['random_direc'];
	$date = $row['post_date'];
	echo '<div id="contentWrapper">';
	echo "<div id='photo'>";
	echo "<div id='actual_image'>";
	echo "<img src='$image_info'>";
	echo "<div id='info_wrapper'>";
	echo "<div id='info_header'>Title: $title &nbsp By: $username &nbsp Date: $date</div>";
	echo "<div id='description'>$description</div>";
	echo "</div></div></div></div>";
}
echo "</body></html>";

Not sure how many of those divs need to be inside the while loop but you can re-arrange as needed.

ralston3

Touched your suggestion up to fit and it works great. Now it displays them all but in order from oldest to newest (when going from top to bottom). I'm trying to get the reverse, newest to oldest (when going from top to bottom), any suggestions?

ralston3

scratch that, figured it out. Thanks for all the help btw

ginerjm

Success!!

HTH!

aman258047

HTML Markup
The HTML markup is simple, it
contains an ASP.Net FileUpload
control, a Button to trigger the
upload process and an ASP.Net
GridView that will display the
uploaded images once upload is
completed.
<asp:FileUpload ID="FileUpload1"
runat="server" />
<asp:Button ID="btnUpload"
runat="server" Text="Upload"
OnClick="Upload" />
<hr />
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="false"
ShowHeader="false">
<Columns>
<asp:BoundField DataField="Text" />
<asp:ImageField
DataImageUrlField="Value"
ControlStyle-Height="100"
ControlStyle-Width="100" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the
following namespaces
C#
using System.IO;
using System.Collections.Generic;
VB.Net
Imports System.IO
Imports System.Collections.Generic