Making images visible in php localhost

bgpasj · Dec 11, 2008

Invisible Images (.gif, .jpeg, .png)

I am using PHP from localhost. The files have extension .php. The content has images and text. However, only the text is displayed when I load them from http://localhost/file.php. A red X marks the location of the image.

If I change the extension from .php to .html and load the same file from file:///C:/inetpub/wwwroot/file.html, the image is visible. But it is not from localhost with .php.

when I change the header to image/gif, I see only the image not the text.

<HTML>

	<META NAME="GENERATOR" Content="Microsoft Visual Studio">
	<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">



<style type = "text/css">
p
	{
 		font-weight: bold;
	}

body 
	{ 
 		background-image: url("image1.gif"), no-repeat;
	 	background-position: top right;
	}
</style>

</head>

<body>

Images [gif, jpg, png] are not showing up from http://localhost from file with php extension as background or img src.

	<img src="image1.gif" alt = "gif image" border = "1"/>
	<br />   <br />		
	<img src="image001.jpg" alt = "jpg image"/>
	<br />   <br />
	<img src="image1.png" alt = "png image" border = "2" />		
	<br />   <br />

<?php
echo "Images not visible!";
?>
</body>
</html>

gd
GD Support enabled
GD Version bundled (2.0.34 compatible)
FreeType Support enabled
FreeType Linkage with freetype
FreeType Version 2.1.9
T1Lib Support enabled
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled
PNG Support enabled
WBMP Support enabled
XBM Support enabled

bpat1434 · Dec 12, 2008

Where's your php code?

bgpasj · Dec 12, 2008

The php code is right above </body></html>.

The complete file would display an image at the top and some text at the bottom. It is part html, part php, part css.

bpat1434 · Dec 13, 2008

The only php code I see is

echo "Images not visible!";

which is not image code.

I'm going to take a stab anyway though. Your image source is relative to the current document. I'm guessing that they should be relative to the document root of your site. If that's true then you need to prepend the image name with a "/" so it becomes:

<img src="/image1.gif" alt="" />

bgpasj · Dec 13, 2008

Both image1.gif and the php file are in the same directory or folder.

Anyway, I added the slash as suggested, but nada.

Still the same X and the border around it.

HalfaBee · Dec 13, 2008

What do you mean by this part of your post?

when I change the header to image/gif, I see only the image not the text.

bpat1434 · Dec 13, 2008

What happens if you browse directly to the image?

bgpasj · Dec 14, 2008

1.- file.HTML -- I can see all three images when I change the file extension from .php to .html and open it in the browser from file:///C:/inetpub/wwwroot/file.html

file.PHP -- I am using PHP Designer and can see the .jpg and png images when I click on the Preview tab but not the .gif one.

file.PHP -- I cannot see any of the three from http://localhost/file.php

bgpasj · Dec 14, 2008

if I change the header in php from type text to type image/gif, the gif image appears at the top but all the text disappear below.

HalfaBee · Dec 14, 2008

Do a view source of the localhost php file and see what is in it.

There is no header() code in the posted script, so something odd is happening.
If you make it display as a gif, there must be image information being sent, not just the html.

bgpasj · Dec 15, 2008

HalfaBee;10895803 wrote:
What do you mean by this part of your post?

I was referring to the header below that I have in another file.

So far, it is the only way to see an image from localhost. However, nothing else shows up including the words text, text.

It cannot display two images either even if I just copy and paste the first section.

<?php
Header("Content-Type: image/gif");

$fn=fopen("image1.gif","r");
fpassthru($fn);
//exit();
?>

<?php
echo "Text text text ";
echo " ";
?>

bgpasj · Dec 15, 2008

HalfaBee;10895954 wrote:
Do a view source of the localhost php file and see what is in it.

There is no header() code in the posted script, so something odd is happening.
If you make it display as a gif, there must be image information being sent, not just the html.

Here is what view source reveals for file.php:

<HTML>

	<META NAME="GENERATOR" Content="Microsoft Visual Studio">
	<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">



<style type = "text/css">
p
	{
 		font-weight: bold;
	}

body 
	{ 
	 	background-position: top right;
	}
</style>

</head>

<body>

Images [gif, jpg, png] are not showing up from http://localhost from file with php extension as background or img src.

	<img src="/image001.gif" alt = "gif image 001" border = "1"/>
	<br />   <br />		
	<img src="image001.jpg" alt = "jpg image"/>
	<br />   <br />

	<img src="image1.png" alt = "png image" border = "2" />		
	<br />   <br />

Images not visible!
</body>
</html>

HalfaBee · Dec 15, 2008

<?php
Header("Content-Type: image/gif");

$fn=fopen("image1.gif","r");
fpassthru($fn);
//exit();
?>


<?php
echo "Text text text <br />";
echo " <br />";
?>

Ok, now the truth comes out.

If you are outputting an image, you can't output html/text.

You need an html/php file outputting html and the html <img> tag points to the php image file..

bgpasj · Dec 16, 2008

We are discussing 3 different files here.

The first one is listed in the first posting and is named file.php.
The second one is identical to the first file but is name file.html.

I wanted to check if the problem was with the image, the browser, or the server localhost.

So far, only localhost cannot display the images.

To further isolate the possible causes, I use a 3rd file with the header image/gif. Only then does localhost display the images.

The bottom line using localhost, I can have either text or images but not both. I want both naturally together.

If you look again, you will see that within the html/php file I have the img tag for .gif, .jpg, .png.

The image file is an ordinary gif picture. Anyway, I enclosed within an include and php tag, but nada except X.

Take a look at these:

body 
	{ background-image: url("image1.gif"), no-repeat;
	 	background-position: top right;
	}

<img src=" <?php

$fn=fopen("image1.gif","r");
fpassthru($fn);

?>
" />

	<img src="/image001.gif" alt = "gif image 001" border = "1"/>
	<br />   <br />		
	<img src="image001.jpg" alt = "jpg image"/>
	<br />   <br />
	<img src="image1.png" alt = "png image" border = "2" />

------------------------------------------ Output from localhost ------------------------------------

X X
Images [gif, jpg, png] are not showing up from http://localhost from file with php extension as background or img src.
X gif

X jpg

X png

HalfaBee · Dec 16, 2008

ok, you need to get a handle on how php works.

A php script outputs text which the browser sees as html.

so,
<img src=" <?php
include('image1.gif');
?>
" />
is wrong.
It should be

This will display an image, even from localhost.

bpat1434 · Dec 16, 2008

Okay, you're missing the point. The src attribute of an img (x)html element takes a path OR in some browsers (firefox, opera I believe, safari maybe) can use base64 encoded data.

So your img tags should look like:

<img src="image.php?file=image1.gif" />

Then you have a php file aptly called image.php in which you can do:

<?php
$path = realpath($_SERVER['DOCUMENT_ROOT']).'/images/';
$file = $_GET['file'];

if(is_file($path.$file))
{
    $data = file_get_contents($path.$file);
    $im = imagecreatefromstring($data);
    header('Content-Type: image/gif');
    imagegif($im);
    imagedestroy($im);
    exit;
}
else
{
    // We'll display a default image:
    $data = file_get_contents($path.'default.gif');
    header('Content-Type: image/gif');
    echo $data;
    exit;
}

bgpasj · Dec 16, 2008

HalfaBee;10896094 wrote:
ok, you need to get a handle on how php works.

A php script outputs text which the browser sees as html.

so,
<img src=" <?php
include('image1.gif');
?>
" />
is wrong.
It should be

<img src="image1.gif" />

This will display an image, even from localhost.

Hi,

About this <img src="image1.gif" />.

I already have this 3 times in file.html or file.php and you can see them in posting # 1 from the code itself and also in posting # 12 from Firefox-> view source.

Anyway, I just copied it from your post and pasted it my code just to be on the safe side. The result was my usual X.

When what should have worked doesn't, I try everything like dealing with align: center in Firefox.

bgpasj · Dec 16, 2008

I am going to work on post # 16 and see what gives.

bgpasj · Dec 16, 2008

Re Post 16:

As is I got nothing from the them.

Since I am using Windows, I had to change the slash to a backslash for the directory.

Then I landed into default.gif on the screen.

To figure out why, I commented the two header lines and inserted several echo lines. Here are the code and the output.

imageEcho.php

<?php
$path = realpath($_SERVER['DOCUMENT_ROOT']).'\\'.'images'.'\\';


echo $path;
echo "<br /> <br />";


$file = $_GET['file'];
if(empty($file))
{
	echo "Variable file is empty <br /> <br />";	
}
else
{
	echo "Variable file is NOT empty <br /> <br />";	
}
print_r ($file);



if(is_file($path.$file))
{
echo "inside IF";
echo "<br /> <br />";


$data = file_get_contents($path.$file);
$im = imagecreatefromstring($data);
//    header('Content-Type: image/gif');
    imagegif($im);
    imagedestroy($im);
    exit;
}
else
{
echo "inside ELSE";
echo "<br /> <br />";

$data = file_get_contents($path.'default.gif');

if(empty($data))
{
	echo "Variable data is empty <br /> <br />";	
}
else
{
	echo "Variable data is NOT empty <br /> <br />";	
}    


if(is_file($data))
{
	echo "V data is a file <br /> <br />";	
}
else
{
	echo "V data is NOT a file <br /> <br />";	
} 

print_r ($data);    


 //   header('Content-Type: image/gif');
    exit;
} 
echo "OUTside IF";
echo "<br /> <br />";

Output:

C:\inetpub\wwwroot\images\

Variable file is empty

inside ELSE

Variable data is NOT empty

V data is NOT a file

GIF89a,,‡&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;3&#65533;&#65533;f&#65533;&#65533;™&#65533;&#65533;Ì&#65533;&#65533;ÿ&#65533;3&#65533;&#65533;33&#65533;3f&#65533;3™&#65533;3Ì&#65533;3ÿ&#65533;f&#65533;&#65533;f3&#65533;ff&#65533;f™&#65533;fÌ&#65533;fÿ&#65533;™&#65533;&#65533;™3&#65533;™f&#65533;™™&#65533;™Ì&#65533;™ÿ&#65533;Ì&#65533;&#65533;Ì3&#65533;Ìf&#65533;Ì™&#65533;ÌÌ&#65533;Ìÿ&#65533;ÿ&#65533;&#65533;ÿ3&#65533;ÿf&#65533;ÿ™&#65533;ÿÌ&#65533;ÿÿ3&#65533;&#65533;3&#65533;33&#65533;f3&#65533;™3&#65533;Ì3&#65533;ÿ33&#65533;33333f33™33Ì33ÿ3f&#65533;3f33ff3f™3fÌ3fÿ3™&#65533;3™33™f3™™3™Ì3™ÿ3Ì&#65533;3Ì33Ìf3Ì™3ÌÌ3Ìÿ3ÿ&#65533;3ÿ33ÿf3ÿ™3ÿÌ3ÿÿf&#65533;&#65533;f&#65533;3f&#65533;ff&#65533;™f&#65533;Ìf&#65533;ÿf3&#65533;f33f3ff3™f3Ìf3ÿff&#65533;ff3fffff™ffÌffÿf™&#65533;f™3f™ff™™f™Ìf™ÿfÌ&#65533;fÌ3fÌffÌ™fÌÌfÌÿfÿ&#65533;fÿ3fÿffÿ™fÿÌfÿÿ™&#65533;&#65533;™&#65533;3™&#65533;f™&#65533;™™&#65533;Ì™&#65533;ÿ™3&#65533;™33™3f™3™™3Ì™3ÿ™f&#65533;™f3™ff™f™™fÌ™fÿ™™&#65533;™™3™™f™™™™™Ì™™ÿ™Ì&#65533;™Ì3™Ìf™Ì™™ÌÌ™Ìÿ™ÿ&#65533;™ÿ3™ÿf™ÿ™™ÿÌ™ÿÿÌ&#65533;&#65533;Ì&#65533;3Ì&#65533;fÌ&#65533;™Ì&#65533;ÌÌ&#65533;ÿÌ3&#65533;Ì33Ì3fÌ3™Ì3ÌÌ3ÿÌf&#65533;Ìf3ÌffÌf™ÌfÌÌfÿÌ™&#65533;Ì™3Ì™fÌ™™Ì™ÌÌ™ÿÌÌ&#65533;ÌÌ3ÌÌfÌÌ™ÌÌÌÌÌÿÌÿ&#65533;Ìÿ3ÌÿfÌÿ™ÌÿÌÌÿÿÿ&#65533;&#65533;ÿ&#65533;3ÿ&#65533;fÿ&#65533;™ÿ&#65533;Ìÿ&#65533;ÿÿ3&#65533;ÿ33ÿ3fÿ3™ÿ3Ìÿ3ÿÿf&#65533;ÿf3ÿffÿf™ÿfÌÿfÿÿ™&#65533;ÿ™3ÿ™fÿ™™ÿ™Ìÿ™ÿÿÌ&#65533;ÿÌ3ÿÌfÿÌ™ÿÌÌÿÌÿÿÿ&#65533;ÿÿ3ÿÿfÿÿ™ÿÿÌÿÿÿ&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;!ù&#65533;&#65533;&#65533;ÿ&#65533;,&#65533;&#65533;&#65533;&#65533;,,&#65533;ÿ&#65533;¯ H° Áƒ*\È°¡Ã‡#JœH±¢Å‹3jÜÈ±£Ç CŠI²¤É“(Sª\É²¥Ë—0cÊœI³¦Í›8sêÜÉ³§ÏŸ@ƒ J´¨Ñ£H“*]Ê´©Ó§P£JJµªÕ«X³jÝÊµ«×¯`ÃŠK¶¬Ù³hÓª]Ë¶*Û·pãÊK·®Ý»xóêÝË·ï5&#65533;~»,¸0J&#65533;ˆ +&‰˜ðâÇ;†LcâÄ•3W

As for the html, here they are:

htmlcode.php

<HTML> 	<HEAD></head>
<body>

before image before image before image <br /> <br />

<img src="image.php?file=image1.gif" />

<img src="imageECHO.php?file=image1.gif" />	
after image after image after image after image after image <br /> <br />

</body>
</html>

htmlcode.php:

before image before image before image 

X

after image after image after image after image after image .

In summary, I can see either the text or the image but not both together.

HalfaBee · Dec 16, 2008

If you output text in the image data it invalidates the image and you get a X.