Question

由于其他属性适用，因此已正确选择了元素。没有控制台错误。

我尝试过：

img / hero.jpg -当我单击VS Code中的链接时有效
/img/hero.jpg -单击后可使用
../../ hero.jpg -单击后即可使用
../ img / hero.jpg -不起作用
完整路径-单击后可以使用

此处显示problem。您可以看到src属性调用的图像有效。

Answer 1

老实说，我不理解您的设置/问题，但是我认为，如果您了解相对网址的工作原理要好一些，那么您可以自己弄清楚。

在您的服务器上，文件存放在类似的位置

/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png

在您的计算机上，文件存放在类似的位置

C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png

在styles.css中，您会遇到类似的情况，

body {
    background-image: url('/img/background.png');
}

以/开头的URL指示浏览器将其解释为根目录。在Windows PC上为C:\，在Linux PC上为/。

但是，当您从https://example.com之类的URL进入页面后，一旦访问该页面，则根目录将变为https://example.com/。

因此，使用/img/background.png将使其在https://example.com/img/background.png上查找图像，但是在您的本地计算机上它将在C:\img\background.png上查找图像

像这样以无斜杠开头的url，img/background.png查找相对于css文件所在文件夹的图像。因此，在这种情况下，它将在{{1} }，并在您的本地计算机上显示在https://example.com/css/img/background.png

在我的示例中，最好的解决方案是使用C:\Users\Nani\Desktop\Website\css\img\background.png，它将查找相对于css文件夹的一个目录，然后在img文件夹中。在您自己的计算机上以及上传后，它都将始终如一地工作。

假设问题出在url路径的声明方式上，那么这足以说明您需要做什么。否则，问题可能出在其他方面。例如，似乎您正在使用SCSS。也许SCSS不是在您的本地计算机上编译的（或者已经有一段时间了），但是它是在实时服务器上编译的？

Answer 2

它可用于实时服务器，因为其设置使index.html的位置成为文档（$dates = preg_replace_callback("/\d+/", function($item){ return date("Y/m/d h:m:s", (int)$item[0]); }, $timestamps);）的根。直接打开index.html时，您的根目录会有所不同，如果使用/开头的路径，则不会从正确的位置加载图像。

Best Practice

最佳做法是使用相对文件路径（如果可能）。

使用相对文件路径时，您的网页将不会绑定到当前的基本URL。所有链接都可以在您自己的计算机（localhost）以及您当前的公共域和将来的公共域中使用。

Answer 3

我遇到了同样的问题，结果是我写错了路径。您必须根据 css 文件的位置编写 url，而不是索引文件的位置。因为读取url的是css文件。所以它应该是这样的：

body {background-image: url('../img/background.png');}

因为您的 CSS 和 IMG 位于不同的文件夹中。

背景图片url（）可在实时服务器上使用，但是当我在浏览器中打开index.html时，它不能使用吗？

3 个答案: