Why wont the ../ file path work in css and html?

Question

You see, whenever I try to use ../ in CSS or HTML, it doesn't appear to work, It just gives me this error: GET file:///C:/Users/MYUSERNAME/Desktop/Coin%20Clicker/source/coin.png net::ERR_FILE_NOT_FOUND even though I used ../images/. Keep in mind coin.png is in images, not source. However, if I do this in javascript, which is in a different file than the HTML file, it does appear to work. Any idea why this occurs? here is my code:
CSS:

#coin {
  background-image: url("../images/coin.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
#coin:active {
  background-image: url("../images/coin-pressed-in.png");
}

HTML:

<div>
  <span id="count">0¢</span>
</div>


  <button id="coin" alt="coin" onclick="plusOne()"></button>


<script src="script.js"></script>

javascript:

var dollar = 0;
var cents = 0;
var count = document.getElementById("count");

function plusOne() {
  if (cents < 95) {
    cents +=5;
    count.innerHTML = cents + " ¢";
  } else if (cents == 95) {
    dollar = 1;
    cents = 100;
    count.innerHTML = dollar + " $";
  } else if (dollar >= 1) {
    dollar += 0.05;
    count.innerHTML = round(dollar, 2) + " $";
  }
}

function round(value, decimals) {
  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

document.getElementById("favicon").href = "coin.png";

document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    document.getElementById("favicon").href = "../images/coin.png";
  } else {
    document.getElementById("favicon").href = "../images/coin-disabled.png";
  }
});

File directory:

- images/  
    * coin.png  
    * coin-disabled.png  
    * coin-pressed-in.png  
- source/  
    * coin.html  
    * script.js

Can you list your project directory structure? Where is the css file and images directory relative to your project root? — Lateralus, Feb 07 '22 at 03:05
Looking at your file directory tree it isn't clear where your CSS file is located. Please add id aswell. — No Reply, Feb 07 '22 at 03:23
The CSS file is in the HTML file, or rather, there is no CSS file. — ArcadeSmasher, Feb 07 '22 at 03:25
Follow this: https://stackoverflow.com/questions/15785390/css-images-in-another-folder — Sohan Arafat, Feb 07 '22 at 03:25
Where **exactly** is your CSS? Please explain it using clear code examples. Also, have you tried clearing the browser cache? — Phil, Feb 07 '22 at 03:30
No repro ~ https://codesandbox.io/s/exciting-cherry-uk5rl?file=/source/coin.html — Phil, Feb 07 '22 at 04:16

score -1 · Answer 1 · answered Feb 07 '22 at 04:51

-1

It seems your root folder (The folder designated as the origin for your project is source). This is evidenced by the filenotfound error showcasing it is looking for the image in the source folder, not the images folder. You have a few options:

Move the images folder INSIDE the source folder Change the Project folder to Coin%20Clicker Move the images folder INSIDE the source folder AND make a separate folder for the html and js to keep them separated.

answered Feb 07 '22 at 04:51

ItsMeNaira

360
1
12

Looks like OP is using the `file:///` protocol so there should not be any _document root_ – Phil Feb 07 '22 at 05:37

jeevitha · Answer 2 · 2022-02-07T03:56:56.887

-2

The tag will be href = "/images/coin.png" or href = "images/coin.png".it will work.this will same as url tag like this url("images/coin.png").

edited Feb 07 '22 at 03:56

answered Feb 07 '22 at 03:51

jeevitha

1
3

If the HTML is `source/coin.html` and the image is `images/coin.png`, there's no way the relative path `images/coin.png` will work. It also seems OP is using a `file:///` URI to view their page; `/images/coin.png` won't work without a server – Phil Feb 07 '22 at 03:55

Why wont the ../ file path work in css and html?

2 Answers2