: Is it possible to reference images outside the domain root? I have a website with a file structure a bit like this.... /webroot/folder1/main - php, css etc files in here /webroot/folder1/data/images

@Yeniel560

There is no way to reference those image files through HTML or CSS. Your "web root" is /webroot/folder1/main/ - that folder on the server corresponds to the root of your domain. So a file at /webroot/folder1/main/page.html on the server is accessed on example.com/page.html.
Everything below the main folder is publicly accessible using your domain, while everything above that on the server is not.

The most appropriate solution for you is to move the images folder under the main folder, i.e. so it's at /webroot/folder1/main/images/. Then the images can be referenced from the stylesheet with url("/images/file.jpg") (note the leading slash on the URL).

There are reasons you may wish to keep files outside the web root, such as security. Moving your application files there prevents them from ever being accessible publicly in case of a server misconfiguration (quite rare).

You may also want to restrict users to viewing certain files - server side code like PHP should still be able to access the files. You would put the files outside the web root and have a public URL (e.g. a PHP script) that checks permissions and serves the file if allowed.

Vote Up Vote Down

@Ravi8258870

It is not picking up the images. I guess this is because the ../ wants to go up a level but the website thinks its at the root already so it cant go up?


Correct. Relative URLs are resolved by the client, not the server.

If it was possible to pass ../ to the server and escape the document root then any file on the server would be available to any HTTP client. This would be a serious security problem.


Is this normal, should I have expected this to happen?


Yes


Or there a way round it?


Expose the images on a sensible URL. You could use (to take Apache HTTP as an example) Alias to expose a directory outside the server root to a URL, or use a symbolic link, or you could just move the files so they are under the server root.

Change the URLs you are passing to the client to point to the new URLs you've set up for the images.

Vote Up Vote Down

@Speyer207

Assuming that I'm correct then your structure is like so:

/webroot/folder1/main/index.php
/webroot/folder1/main/style.css
/webroot/folder1/main/data/images/sprite1.png

If this is the case then style is also included within the root so using ../ would actually take you to /folder1/data/images/sprite1.png rather than /webroot/folder1/main/data/images/sprite1.png also because its in the root you do not need / at the start and should only be included when going up a level. So your CSS should work with the following:

background: url('data/images/sprite1.png');

Vote Up Vote Down