我正在为一个个人项目学习django。在这个项目中，我第一次创建了两个应用程序"；API"；以及"；搜索"；。在开发过程中，我决定将API内部的搜索结合起来；API"；具有在"；搜索"；。稍后，我创建了一个基本模板，该模板从基本模板呈现为两个不同的html exsted。在第一个模板(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
这是我的设置.py：我在APP_DIRS中设置为False，用于尝试不再从旧目录加载文件，但似乎不起作用。
设置.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
我希望有人能解释什么是错误的，我发布的信息就足够了。如果帖子看起来很混乱，但这是我第一次在Stackoverflow上发帖，请道歉：(。
谢谢你的帮助。
如果没有前导斜杠，此URL是相对的，而不是绝对的
<img src="static/img/kite3.jpg"
这就是为什么在页面search的终端中，您会看到以search:开头的URL
[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' %}"