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

Question

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

我努力了：

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

问题在这里看到。 您可以看到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处查找图像C:\\img\\background.png

像这样以无斜杠开头的url， img/background.png查找相对于css文件所在文件夹的图像。因此，在这种情况下，它将在https://example.com/css/img/background.png处在线查找背景。 https://example.com/css/img/background.png然后在您的本地计算机上查找C:\\Users\\Nani\\Desktop\\Website\\css\\img\\background.png

在我的示例中，最佳解决方案是使用../img/background.png ，它将在相对于css文件夹的一个目录中查找一个目录，然后在img文件夹中进行查找。 在您自己的计算机上以及上传后，这将始终如一地工作。

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

Answer 2

它可以在实时服务器上运行，因为它的设置使index.html的位置成为文档（ / ）的根。 直接打开index.html时，您的根目录是不同的，并且如果使用/开头路径，则不会从正确的位置加载图像。

最佳实践

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

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