Image not loading in Localhost

i have made a project in php . the problem is that when i open a html file directly it show and loads image correctly. But when i Open same html file from inside my project folder in localhost(WAMP Server) the image doesn’t load.

Path of the file : "C:\wamp64\www\ecom\images ".

pic 1 is when i open same html file in localhoost of wamp server.
pic 2 is when i open html file normally.

can anyone please help me?


Web space requires url’s. Url’s to a webserver are all relative to the “web root” as defined by your web server configuration.

When you open a local file, you are working with your workstation file system, and the rules of the operating system. The 2 systems are incompatible.

A url:

https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png

This resource is returned to you by the webserver, but you really have no idea where it actually resides within the google infrastructure. It could be an image that was generated on the fly, by some software, and not a physical image located on any server or storage system.

C:\wamp64\www\ecom\images\somefile.jpg is a path to a file on a windows computer. That is not “web space”.

Within web space, you typically define the path to resources like static images relative to the webroot. So your markup would be something like:

<img src="/images/<?= $productImg ?>" alt="picture of product">

This is just a made up example on my part that shows one way markup might be using a php variable and appending it a string using php’s ability to intermix php and html.

Assume that $productImg = “newproduct.jpg” here.

It should be apparent that the effective url to the image in web space is “/images/newproduct.jpg”.

If you aren’t clear on how you have configured your localhost web server, make a php script that has nothing in it other than:

phpinfo();

The configured directory that is the web root for your server will be listed as the DOCUMENT_ROOT.

Any thing that is in a folder beneath the DOCUMENT_ROOT directory will by default be available in webspace, however, when referencing anything like images, css or javascript, you will reference those things relative to the web root ie. “/css/styles.css” or “/images/products/acmewidget.png”.

Anything in your html requires url’s, not file system paths.

Hopefully it is clear in this example that if the webroot is:

C:\wamp64\www\ecom\

And your html needs to reference the file on your filesystem that is:

C:\wamp64\www\ecom\images\somefile.jpg

Then the relative path to that would be:

/images/somefile.jpg

Notice also that in webspace you use forward slashes and not backslashes! Don’t use windows backslashes for anything inside your html, css or javascript.

You probably already know what the webroot is, because it’s the same directory where you have the index.php or whatever other script is that you ran to display the broken images.

Fix the img src’s to use relative paths to your webroot. My guess is that your webroot is pointing to C:\wamp64\www\ecom, but again you can verify that and fix your url’s accordingly.

1 Like

Tried asyou told add relative path but same problem is coming.

The output has changed a littlie bit.

4

What is your DOCUMENT_ROOT?

At this point, I would need to see your actual php code to really help you sort out things, because it looks like your entire form disappeared. This could be for similar reasons to the one I described, as in your index.php file is referring to an external stylesheet using your filesystem path rather than a relative path to it under your webroot.

You can also encounter permissions issues, if your webserver doesn’t have permissions to access the filesystem directory structure of your project.

Regardless, I can only guess without seeing some code. :wink:

5

i am sending you a link in message where i uploaded my whole code

Ok, so that means that your relative path to the image needs to be:

/ecom/images/addproduct.jpg

“Relative” means that the “/” is equivalent “C:\wamp64\www” as far as your webserver is concerned.

1 Like

Ok Now the images are showing.

Can you Please Solve this also.

i have taken a choose file option where image is stored inside database and is retrieved on another page inside a table. There also same problem is coming.

OUTPUT:

For Inserting image i did:


For Retriving it:
9

database :

Datatype Taken is BLOB

Glad you sorted it out. It’s a tough concept for many people starting out. Just try and keep in mind that any html tags or css urls need url’s, not the path to a file. If you can keep that clear in your mind, you will avoid a lot of mistakes. The reason to use a relative path in your code, is that the server fills in the hostname for you. You could also refer to a url as something like: <img src="http://localhost/ecom/images/addproduct.jpg">
The problem with that is that when your code gets moved to a server with a real hostname, all those url’s will be invalid. So this is why you always want your url’s to be relative to the webroot of your project, whatever that might be.

In PHP any functions that actually use files on your workstation/server like include/require/fopen etc. need paths to your file system.

To make your php code portable between machines, you want to make any file system related variables more like a relative path. In other words, you want to utilize something that sets up the root location of your php code. That way you can move a project from one machine to another and have it work.

If you have code like:

<?php
require "C:\wamp64\www\include\config.php";

This will work, but if you move it to a linux server, everything will be broken, because the filesystem won’t match your workstation. Instead you want to have a common include that uses one of the php magic variables like __DIR__ or dirname(__FILE__) to use relative paths with your php functions.

This SO thread talks about these in more detail. php - How to use __dir__? - Stack Overflow

These days, the best practice for php web projects is to have a front controller script that routes all other php code through it, via class loading and file system features that require and include files as needed. The vast majority of your php scripts won’t be under the webroot at all, so they can not be accessed directly via url. If you look at most php frameworks they will have a /projectname/public directory, and that directory will have the front controller index.php script and everything else will be in other directories off /projectname.

I bring this up, as confusing url’s with filesystem paths is one of the hardest things to understand when first learning php web development.

1 Like

Your code has a bug – your foreach through the images should have the SQL code nested inside the block. You have:

foreach ($fileup as $imag) {
}
.... $sql ... etc.

It should be:

foreach ($fileup as $imag)  {
     $sql = ... etc.
}

Your code currently should work with only one image in the form, but if you have multiple images it would only store the last one.

As for displaying the images, what does the product.php script do? It needs to retrieve the blob value, set the proper header for the mimetype of the image you stored (which you don’t seem to keep track of in your database) and return the blob variable contents.

Rarely do people store images in a database, because of the performance cost of reading them out of it. Usually you store images someplace on the filesystem and keep track of their location instead.

1 Like

Okay Thanks for the Helping out.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.