I cannot create relative path links

I am trying to make a basic website on visual studio code editor as part of the arts & crafts project

Firstly emphasized item problems are appearing and I cannot see any problems with my code. How do I get these to go away or at least show me what is wrong.

Secondly and most annoyingly I’m having a major frustrating issue trying to create relative links either from files like images or to the style.css sheet. I spent hours linking the style sheet to the HTML index file earlier and I could only do it by copying the address from inside ‘my documents’ which then appeared to be the same address as the copied path from within VSC!?
This is a recurring problem it only works when I copy the entire path and then I can delete part of the path.
I have now managed to insert images by doing this(copying full path from outside VSC). But I want to know why is not working by simply typing the full address or part of the address within VSC like so=
<img src="\images\image title.jpeg>
I have tried / / and \ and I have tried just clicking the images and copying path. I have tried with and without type=“text/css” the style sheet just would not link the way I learnt in codeacademy…

I have put an example of my problem in the image attached, check line 13 image labelled troubleshooting.
As before the word troubleshooting is displayed and the picture will not appear with a relative link.
Neither will it appear if I type more parent folders or forward or backslash.

It’s very frustrating and help would be hugely appreciated!

I have googled and checked the cheatsheet and the code I’m writing is definitely correct so must be another problem that I cannot see.

hey asurasnyx,

it should work with the ./ and the relative file path:

<img src="./images/title.jpg">
2 Likes

If all of the files needed are on your computer, it may simplify things to try putting them in the same folder.
On my computer, if I have the HTML file in the same folder as my CSS file, I can just refer to it by name and not need to do the long file path.

I have tried this and have the same issue.

OK so i have tried this and discovered that if the file is in the same folder as the HTML file then there is no problem. However if i move it into a parent folder then the problem still occurs. Obviously to complete the task I can just keep the files in the same folder. But this is not a proper solution as I want to be able to have files in appropriate folders and link them.

The full path isnt even working in CSS ? ! !
See row 3 in example. I click + control on the link never works?
can someone please help! it’s so annoying. Works if all files are in the same folder but even just moved into the parent folder it stops working?!
cannot find it|690x346

@asurasnyx,

It looks like the problem is that you are using the backslash (\) in your path. In many languages (including CSS, I believe) this character is what is known as an escape character. You can tell by the way it is a different color in VS Code in your screenshot.

To make that path work, there are a few things you can do:

  1. You can replace your backslashes with forward slashes (/). Notice that in @sonnynomnom’s reply, he recommended ./ and not .\.
  2. Alternatively, if you really love the Windows-style backslash, you can put two of them instead of one and the path should work as intended. For example, your path would be url("your\\path\\here\\Resources\\images\\background.jpeg")
  3. Finally, you can use the shortcut ../ to reference a file in the parent folder. In your case, you would type url("../images/background.jpeg")

Hope this explanation helps. Happy coding!

2 Likes

that makes sense, I will try to write with forward slash instead. Although I had directly copied and pasted the path from the image in the left pane.
I have tried both forward and backslash and neither work for linking a background image.
I tried linking the URL from a website instead of my local drive and it worked.
But the background image just will not load from my path.
The background image is now in with my style.css sheet and works.
But i still don’t understand why the image has to be in the same folder as my style sheet to work?

I would love to know why? I feel this might present problems in the future.

Many thanks in advance!

One other thing, and I could be completely wrong here, Is the hard drive letter you have in the file path correct? Most computers label the main hard drive as C were as you choice D.

Though if you are using an unusual OS, or you are like me and have 6 drives on one computer :laughing:, than Drive D makes perfect since.
I think @el_cocodrilo is pointing out your main problem, but the drive name is something to watch out for.

1 Like

I’m having the same issue as asurasnyx with the background image for the header Dasmoto’s Arts and Crafts not loading. I’ve gone through all the suggestions on here, checked the cheat sheet, Googled help for it, and right clicked to “inspect” the code to see what I might be doing wrong. I’ve got the forward slashes, the image was saved locally and have tried numerous variations of the background-image line in the css file with no success of the image showing up. I had to walk away from this yesterday as frustration was getting the better of me. It feels like I’m missing something minor, but for the life of me can’t figure out what it is.
Is the html file supposed to have something that mirrors the line for the background images in css? I’ve only got the

Dasmoto’s Arts & Crafts

that would “correspond” with the background image in the css file.

The line currently looks as follows specifically for the background-image line:
background-image: url("./images/pattern.jpeg");

Thanks.

I’ve had the same issue on Visual Studio when completing the Dasmoto’s Arts and Crafts project.

I’m using a Safari browser. When I open the index.html file in the browser it looks as though the link to the css file doesn’t work. When I manually add the css file to the page in Safari by opening Preferences->Advanced Options->Stylesheet->Add File, the CSS renders as expected.

Here’s the code in the document head:

<head>
    <title>Dasmoto's Arts and Crafts</title>
    <link href="/dasmotos/resources/css/index.css" rel="stylesheet" type="text/css">
</head>

Racking my brains around this one, so any help would be appreciated! Thanks in advance.

Unless the HTML code you are trying to ling to the stylesheet is in the folder “dasmotos” , than you will need to include the full file path, starting with the letter of the hard drive it is in.

I’m wondering whether some of the confusion here is around the nature of relative paths. Perhaps an example will help.

I’ve done the Dasmoto project on my local computer, using Visual Studio Code. I have a single directory (folder) - which is, incidentally, also a Git repo - called Codecademy, and within that I have another directory called Dasmoto. Here’s a screenshot of the folder structure:

image

So, my “parent” directory for the purposes of the Dasmoto project is the Dasmoto directory. That’s where my index.html file is, and it’s also where the image dasmotos-arts_redline.jpg has been saved. (Remember, the “redline” is the diagram showing you what the finished product should look like.)

Below that, I have two more directories:

css, containing my stylesheet file style.css,
and img, containing the four images I need for the site.

Within index.html, I can reference my stylesheet with the following tag:

<link rel="stylesheet" type="text/css" href="./css/style.css"/>

This is because, from index.html's perspective, it’s current directory is Dasmoto/.

The period . tells the rendering engine "start in the current directory, then go to /css/style.css.

If, however, I changed my structure around (the green items are new - thanks Git tracking!):

image

You see how my index.html page is now in a subdirectory of Dasmoto called www. My link to the CSS no longer works, because ./css/style.css is looking for Dasmoto/www/css/style.css which doesn’t exist.

We can work around this by using the double-period .., which tells the system to “go up one directory” before continuing on the path, so I need to change my tag like so:

<link rel="stylesheet" type="text/css" href="../css/style.css"/>

So, with index.html in the www subdirectory this tag is saying “go up one directory, to Dasmoto, then go to `/css/style.css”.

If you’re working on your PC using a code editor like Visual Studio Code, one useful feature to test your links is that they are clickable within the editor to test them:

image

If the path is valid, the “follow link” feature opens the file in the editor. If the path is off, I get an error and VSCode asks me if I want to create that file. :slight_smile:

Hopefully this will be of some help to those of you struggling with the paths. :slight_smile:

2 Likes

Thanks for your help @8-bitgaming and @thepitycoder - really useful advice there and thanks for the explanation as well!

I found that my css file linked directly by including the full file path right to the hard drive, as well as using a double-period - thanks!

1 Like

Long path tool can solve your problem easily. It can delete, copy, move and bulk rename long path files or locked file easily. Try it, It is very useful. - ( Tom Murphy )

I suggest you try Long path tool is the very good program for easily delete, copy & rename long path files, error, unlock solution.Try it and solve your problem. - ( Tom Murphy )

Thank you! I was looking for the answer everywhere what’s wrong with my “…Images/pattern.jpeg”, and I just missing one “/” before the “images”, omg =))) Thank’s

i had a similar issue, if you set up your “structure” the way the video told you to set it up you need to use something like the following:
background-image: url("…/…/resources/images/pattern.jpeg");
more than anything check to see where your images are relative to your .css file.

I had the same problem but with a little time and fiddling I found a relative path that would work on VS Code but the only problem is I do not understand why it works while the others do not.

The blue circled relative path works but the red bracketed relative path does not. It should be noted that I used VS Code’s “copy relative path” and “copy path” in the beginning and they did not work.

Copy Path(did not work): C:\Projects\CodeAcademy\Dasmoto’sArts&Crafts\css\resources\images\pattern.jpeg

Copy Relative Path(did not work): css\resources\images\pattern.jpeg

The One(did work): resources/images/pattern.jpeg

I also tried them all in Html and it seems to work in reverse. The One did not work but the others did.

For me its nice to know it finally worked but I really need to know why it did and why the others did not, for future projects down the line.

Welcome to the forums, @teraninja31546

This kind of absolute path should, generally speaking, be avoided. (For one, it makes your code less portable.)

Your path is invalid. Taking Dasmoto as the “root” directory, the path you’re trying to use here will - from the perspective of your CSS file - be attempting to find the following:

dasmoto/css/css/resources/images/pattern.jpeg

There is no css directory within the css directory, so the path is invalid.

You’ve corrected your error from the previous attempt. Relative to the css directory, which is where your CSS file lives, this path is correct.