Get the link for an image that is two folders above the present folder.

Question

Hello I am using an MVC architecture for my web application. Now the problem is I have my views in one place and have my images folder in another place. Now I am unable to get my images printed in the right places since, I cannot get my paths right. Even though I give the absolute paths, the images are not getting printed.

images location: /var/www/app_name/web_root/images/1.png

views location: /var/www/app_name/views/controller_name/view1.php

so now in view1.php, I have to add an image and this is how I am trying to link to the image using relative paths.

 <td align="left"><a id="nextlink2" href="#"><img src="../../webroot/images/1.png" width="64" height="64" border="0" /></a></td>

This is the path I am using for absolute path, none of them are working.

 <td align="left"><a id="nextlink2" href="#"><img src="/var/www/app_name/webroot/images/1.png" width="64" height="64" border="0" /></a></td>

And in both the cases, I am unable to get the image to be displayed. What could the cause be? Any help would be great.

Thank you!

Answer 1

You're right to use an absolute path, but an absolute path in web terms is one from the web root, not the full path to the file. So in your case, this should work:

<td align="left"><a id="nextlink2" href="#"><img src="/images/1.png" width="64" height="64" border="0" /></a></td>

similarly your relative path example would work as:

<img src="../../images/1.png" width="64" height="64" border="0" />

but I'd stick with absolute paths.

Answer 2

The browser does not know about the directory structure on your webserver. Try this path starting from the web root (web_root in your case):

<img src="/images/1.png" width="64" height="64" border="0" />

Answer 3

There is also the option to make a symbolic link for the /images folder to be under the DocumentRoot, or alternatively under the /app_name folder.

foo@bar:/var/www/app_name$ ls -la
drwxr-xr-x  2 foo foo 4096 2010-10-21 21:55 .
drwxr-xr-x 80 foo foo 4096 2010-10-21 21:54 ..
lrwxrwxrwx  1 foo foo   10 2010-10-21 21:55 images -> /home/foo/images/

This way, you can link to your images just with :

<img src="/app_name/images/1.png" />

This way, the images don't need to be stored in the same folder, or even on the same partition, and you don't reveal how you file system is organized.