为什么不呢./文件路径是否适用于css和html



你看,每当我试图在CSS或HTML中使用../时,它似乎都不起作用,它只会给我这个错误:即使我使用了../images/GET file:///C:/Users/MYUSERNAME/Desktop/Coin%20Clicker/source/coin.png net::ERR_FILE_NOT_FOUND。请记住,coin.pngimages中,而不是在source中。然而,如果我在javascript中执行此操作,它位于与HTML文件不同的文件中,那么它似乎确实可以工作。知道为什么会发生这种情况吗?这是我的代码:
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  

这似乎是您的根文件夹(指定为项目原点的文件夹是源文件夹(。filenotfound错误证明了这一点,该错误显示它正在源文件夹中查找图像,而不是图像文件夹。你有几个选择:

将图像文件夹移到源文件夹中将项目文件夹更改为Coin%20Clicker将images文件夹移到源文件夹中,并为html和js创建一个单独的文件夹以保持它们的分离。

标记将是href = "/images/coin.png"href = "images/coin.png"。它将起作用。它将与类似于此url("images/coin.png")的url标记相同。

最新更新