javascript - 为什么 ../file 路径在 css 和 html 中不起作用？

Question

你看，每当我尝试在 CSS 或 HTML 中使用 ../ 时，它似乎不起作用，它只会给我这个错误:GET file:///C:/Users/MYUSERNAME/Desktop/Coin%20Clicker/source/coin.png net::ERR_FILE_NOT_FOUND 即使我使用了 ../images/。请记住 coin.png 在 images 中，而不是在 source 中。但是，如果我在与 HTML 文件不同的文件中的 javascript 中执行此操作，它似乎确实有效。知道为什么会这样吗？这是我的代码:
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";
  }
});

文件目录:

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

Answer 1

您的根文件夹似乎是(指定为元素来源的文件夹是 source)。 filenotfound 错误证明了这一点，该错误表明它正在源文件夹而不是图像文件夹中查找图像。您有几个选择:

将图像文件夹移动到源文件夹中 将元素文件夹更改为 Coin%20Clicker 将图像文件夹移动到源文件夹中，并为 html 和 js 创建一个单独的文件夹以将它们分开。