HTML forward slash link doesn't work

Question

1.00/5 (1 vote)

See more:

My site map is like this:

Folder 'images' contains 'image1.png',
Folder 'template' contains 'header.php' and 'footer.php', and
'index.php' includes both header and footer.

Now in header.php I have a link:

HTML

<img src="images/image1.png">

When I run index.php in localhost, The above link works fine when I use it as is but with putting a forward slash at the beginning,

HTML

<img src="/images/image1.png">

it is dead!
When I googled about html/php linking I found out that putting a forward slash makes a kind of absolute path for the link, starting from the root and looking for the file. So, here I expect this to work because I have images folder in website root. Can someone please clarify this path differences for me?

Posted 16-Feb-15 5:36am

cs101000

Updated 16-Feb-15 7:21am

v2

Add a Solution

Comments

cs101000 16-Feb-15 14:03pm

Well, my website has a folder for itself! So that forward slash was pointing to wammp root, instead of my website's root (that was making me confused).

2 solutions

Solution 2

/ moves you up a directory. So, if images is in root a slash will try to put you up a level from the root.

If it's a .Net control you can use ~ to get to the root. ~/images/image1.png.

Posted 16-Feb-15 7:52am

ZurdoDev

Comments

Sergey Alexandrovich Kryukov 16-Feb-15 14:33pm

I voted 4. "/ moves you up a directory" is not quite accurate. If this is a leading '/', it means top directory relative to some "current volume" whatever it is, and, hence, unsuitable for Web pages. I forgot to mention '~/*', but I later credited your answer in mine but explained why using only relative paths could be better.
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-02-16T07:06:00

Solution 1

This is not a "slash". Slash does work; you don't. This is a relative URL, relative to the location of the HTML file with this src element. By some weird reason, you don't have it at appropriate location on the server, or the directory is not accessible. The standard directory delimiter should be '/'; never use '\'.

[EDIT]

See also Solution 2. "~/*" denotes the root of the Web site configured for the site. Again, this is less portable, because it won't work if you are just opening the file in browser, without using any HTTP server, because in this case there is no such notion. Relative paths would work the same way even in this case.

—SA

Posted 16-Feb-15 7:06am

Sergey Alexandrovich Kryukov

Updated 16-Feb-15 8:31am

v2

Comments

cs101000 16-Feb-15 13:25pm

No, I'm not using '\'. Maybe my question needed the next line of code for clarification. Please compare 2 code lines. The second one is not working.

Sergey Alexandrovich Kryukov 16-Feb-15 14:02pm

That's better, thank you for the clarification. Only now I can complete my answer:

First form is relative the the HTML file location, second one — relative to the site root. As in local run the second form has different meaning (locally, you might not have the root of the site at all!), it has different effect on server. Here is my advice: always use the first form (without leading '/'), relative the the file referencing the URL. If will give you more of portability. You pay for that by a need to change all links if you move HTML files between directory level, but it's much less risky because you can debug it all locally and them move to the server without any extra risk to miss anything. Portability between different locations of the site is the #1.

Now, I hope everything is clear. Will you accept the solution formally?
In all cases, your follow-up questions will be welcome.

—SA

cs101000 16-Feb-15 14:22pm

I just found what was happening myself a few seconds before your comment (and I put my comment under main question). But your answer is accepted formally and thank you for your portability advice! Do you also go for php include paths in the same way as html?

Sergey Alexandrovich Kryukov 16-Feb-15 14:28pm

Great. And yes, I would advise to do the same to PHP, more exactly, the HTML embedded in PHP (or visa versa).

But it cannot be always the same way in PHP code itself. Sometimes, you need to know exact absolute path of some file, for example, to manipulate with it. In this case, you can find out the root directory configured for your site:
$_SERVER['DOCUMENT_ROOT']
Then you need to calculate the required path known relative to the root using this server property.

—SA