Django：模板扩展。子模板找不到静态图像

Question

我正在为个人项目学习 Django。在这个项目中，我第一次创建了两个应用程序“API”和“搜索”。后来在开发过程中，我决定在 API 中合并搜索，并使用“搜索”中的功能更新“API”的视图。我稍后创建了一个基本模板，该模板从基本 template.In 扩展到两个不同的 html 第一个模板 (wind_index.html) 页面的所有元素都已完美加载，旋转木马导航栏图像等。当我在浏览器中加载其他模板 (search.html) 时，还扩展了 base.html，所有内容都加载到轮播图像旁边。

项目结构：

WindPortal
API
 static
 templates
     API
         base.html
         wind_index.html
         wind_search.html
     (here where was my old APP "Search")
WindPortal
   rest of the file setting,urls

这是我的 Setting.py：我在 APP_DIRS= False 中设置为尝试不再从旧目录加载文件，但似乎不起作用。

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,  'API', 'templates')],
        'APP_DIRS': False,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    'WindPortal/API/static',
    'static/img',
)

编辑：base.html

    {% load static %}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <link rel="stylesheet"  type="text/css" href="{% static 'API/style.css' %}">
    <title>Wind Portal</title>
  </head>
  <body>

    <!-- navigation bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
  <a class="navbar-brand" href="wind_index.html">Wind Portal</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="wind_index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Wind search</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Kite info</a>
      </li>
    </ul>
  </div>
</nav>
</div>

<!--carousel slider -->
<div id="carouselkite" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="static/img/rsz_kitesurfing1920x9083.jpg" class="d-block w-100" class="img-fluid" alt="kite1">
        <div class="carousel-caption d-none d-md-block">
        <h5 class="display-4">Wind all around the World</h5>
        <p class="display-5">Wind speed and Wind Direction.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="static/img/kite3.jpg" class="d-block w-100" class="img-fluid" alt="kite2">
      <div class="carousel-caption d-none d-md-block">
      <h5 class="display-4">Wind Search</h5>
      <p class="display-5">Use wind search for find your wind !</p>
      <button type="button" class="btn btn-primary">Wind Search</button>
    </div>
    </div>
    <div class="carousel-item">
      <img src="static/img/kitesurfing1920x908(1).jpg" class="d-block w-100" class="img-fluid" alt="kite3">
      <div class="carousel-caption d-none d-md-block">
      <h5 class="display-4">Kite school, Kitespot and more Info.</h5>
      <p class="display-5">Everything you need to know and where to be.</p>
    </div>

    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    {% block content %}{% endblock content %}

  </body>

</html>

终端错误：

29/Mar/2021 13:10:17] "GET / HTTP/1.1" 200 3754
[29/Mar/2021 13:10:17] "GET /static/API/style.css HTTP/1.1" 200 0
[29/Mar/2021 13:10:22] "GET /search/ HTTP/1.1" 200 3984
Not Found: /search/static/img/rsz_kitesurfing1920x9083.jpg
Not Found: /search/static/img/kite3.jpg
[29/Mar/2021 13:10:22] "GET /search/static/img/kite3.jpg HTTP/1.1" 404 2698
[29/Mar/2021 13:10:22] "GET /search/static/img/rsz_kitesurfing1920x9083.jpg HTTP/1.1" 404 2755
Not Found: /search/static/img/kitesurfing1920x908(1).jpg
[29/Mar/2021 13:10:22] "GET /search/static/img/kitesurfing1920x908(1).jpg HTTP/1.1" 404 2749

我希望有人能解释哪里出了问题，我 post 的信息就足够了。如果 post 看起来很混乱，但这是我第一次在 Whosebug 上 post :)。

感谢您的帮助。

Answer 1

如果没有前导斜线，这个 URL 是相对的，而不是绝对的

<img src="static/img/kite3.jpg"

这就是为什么在页面 search 的终端中您会看到 URL 以 search:

开头

[29/Mar/2021 13:10:22] "GET /search/static/img/kite3.jpg HTTP/1.1" 404 2698

绝对 URL 会是

<img src="/static/img/kite3.jpg"

然而两者都是错误的方法，引用静态文件总是使用{% static %}标签

<img src="{% static 'img/kite3.jpg' %}"

Django：模板扩展。子模板找不到静态图像

Django: template extends. Child template don't find the static image

html

django

django-templates

django-staticfiles