Class .css 中定义的背景未显示在网页上。图像路径无法识别。为什么?

Class background defined in .css not showing on webpage. Path to image not recognized. Why?

我做了一个最基础的html和一个最基础的css。我想先放一张背景图片。我不想在 html 中定义样式,而是在单独的 css 文件中定义样式。

我这样做了:
index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>The Ultimate Movies DB</title>

  <meta content="A Movie Database" name="description">
  <meta content="Movie, Database, API" name="keywords">

  <!-- Import own files -->
  <link rel="stylesheet" href="static/css/style.css">

</head>

<body>

<div class="first-div">

</div>

<script src="static/js/script.js"></script>
</body>

</html>

style.css:

.first-div {
    background-image: url("../img/home.jpg");
    background-size: cover;
}

但是背景图片没有显示。

项目结构

这是来自浏览器控制台的消息:

Failed to load resource: the server responded with a status of 404 (Not Found) home.jpg

图片无法识别。

我在 css 文件中放置了图像的相对路径。我尝试了几种写路径的组合,但我无法弄清楚哪里出了问题。

index.html 中调用的 css 文件中存在路径错误。正确的路径是 <link rel="stylesheet" href="../static/css/style.css"/>