I'm learning django for a personal project. In this project i create at the first time two app "API" and "Search". Later during the develop i decide to combine search inside API and update the views of "API" with the function that was in the "Search". I create later a base template that render to two different html exstend from the base template.In the first templates (wind_index.html) all the element of the page are perfectly loaded, carousel navbar image etc. when i load in the browser the other templates (search.html), also exstend with the base.html, everything is loaded beside the images of the carousel.
Structure of the project:
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
This is my Setting.py: i set up in APP_DIRS= False for try to don't load anymore file from the old directory but seems not working.
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',
)
EDIT: 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>
terminal error:
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
I hope someone can explain what is wrong and the info that i post are enough. Apologize if the post looklike chaotic but is the first time that i post on Stackoverflow :).
Thanks for the help.
