背景图像未显示在浏览器中

Question

所以我尝试在标题中添加背景图像，当我从编辑器作为实时服务器打开 HTML 文件时，它工作正常，但是当我从浏览器正常打开文件时（VScode 中没有实时服务器），图片未显示。

.header{
  min-height: 100vh;
  background-image: url("/img/hero.jpg");
  background-size: cover;
  padding: 0 20px;
}

另外，这个错误也向我显示（无法加载资源：net::ERR_FILE_NOT_FOUND），但图像已经在同一方向

Answer 1

Failed to load resources: net::ERR_FILE_NOT_FOUND 表示找不到文件。发生这种情况的原因可能是该文件不存在，它位于与我们指定的目录不同的目录中，或者它位于正确的位置但名称与指定的名称不匹配。您可以在浏览器中打开图像并从中获取网址。

Answer 2

在文件路径中添加 .. 应该可以解决该问题。我有同样的问题。所以应该是这样

  background-image: url("../img/hero.jpg");