I cannot create relative path links

asurasnyx · April 13, 2020, 11:10pm

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.

sonnynomnom · April 13, 2020, 11:24pm

hey asurasnyx,

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

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

8-bit-gaming · April 14, 2020, 2:32am

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.

asurasnyx · April 14, 2020, 2:49am

I have tried this and have the same issue.

asurasnyx · April 14, 2020, 2:57am

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.

asurasnyx · April 14, 2020, 3:34am

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

el_cocodrilo · April 14, 2020, 4:23am

@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:

You can replace your backslashes with forward slashes (/). Notice that in @sonnynomnom’s reply, he recommended ./ and not .\.
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")
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!

asurasnyx · April 14, 2020, 4:31am

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!

8-bit-gaming · April 14, 2020, 1:13pm

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 , 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.

byte0776693572 · April 15, 2020, 1:49pm

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.

cralph1 · April 16, 2020, 9:17am

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.

8-bit-gaming · April 16, 2020, 1:43pm

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.

thepitycoder · April 16, 2020, 6:03pm

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:

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!):

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:

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.

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

cralph1 · April 19, 2020, 7:52am

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!

dev2672290954 · May 18, 2020, 3:59pm

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

aaronarobles0 · May 19, 2020, 7:17am

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.

teraninja31546 · June 15, 2020, 4:02pm

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.

thepitycoder · June 17, 2020, 4:01pm

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.

chip0338520026 · June 19, 2021, 5:36pm

I’m having the same issue with trying to get the relative path to work.

All the lessons mention using the “./” at the beginning of relative paths to link images etc. But when creating the page for the Arts and Crafts project in VSC, the images in my HTML file would not load unless I took out the ./ so the code that worked looked like this:

img src=“resources/images/hacksaw.jpeg” alt="paint brushes"

However in the CSS, when trying to add a background image to the h1, it would not load unless I used this code (which I only discovered in this thread)

background-image: url(’…/images/pattern.jpeg’)

Can someone please explain to me why when building the URL with the VSC auto complete function it made it look like this:

background-image: url(’/resources/images/pattern.jpeg’)

When I cmd + click on the link in VSC it showed the image in a new tab, but when I refreshed the browser page it wouldn’t work? Even if I added a . before the / it still never showed correctly.

If anyone could help explain this to me I would be very grateful!

sterlingevans8585065 · January 18, 2022, 3:42am

Hello, I am experiencing similar issues. I am trying to get a photo from my desktop to show up. I’m using the relative path but no luck. VS code gives the suggested options and when I select one, it populates with the relative path but again, no luck.

Can someone assist with this please?