htmldjangodjango-templates

Fixing load static Django Templates

I've been searching for an answer to this and I feel like I'm doing everything right and have taken on suggestions in multiple posts but this is still stumping me. I'm trying to load static in my django template but for some reason I keep getting and unresolved template error and it won't load in my browser.

project/settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATIC_FILES_FIRS = [os.path.join(BASE_DIR, 'static')]

I've set up the static root. Then in my base.html I've got:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon/favicon.png" %}">
    <title>Title</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

{% include "navbar.html" %}

<img src="{% static "favicon/favicon.png" %}" alt="img"/>

<main class="container mx-auto p-8">
    {% block main %}{% endblock %}
</main>
</body>
</html>

I feel like I'm missing something obvious because that directory should exist but the django template isn't finding it! I've tried using {% load staticfiles %} instead but that errors saying it can't find staticfiles. Any help would be appreciated!

Edit: I'm using django 4.0.6 if that makes a difference!

Edit: Image of folder structure:

folder structure

Edit: Logs that appear when I load the page:

[27/Jul/2022 19:01:58] "GET / HTTP/1.1" 200 15090
[27/Jul/2022 19:01:58] "GET /static/logo.png HTTP/1.1" 404 1783
[27/Jul/2022 19:01:59] "GET /static/favicon/favicon.png HTTP/1.1" 404 1816

EDIT SOLVED: I'm not entirely sure why this solved it but I just removed the STATIC_ROOT setting. Now all my images and static files are loading correctly.

Thanks, Mitchell

Solution

  • I managed to solve this issue by removing the STATIC_ROOT setting.

    I can't explain why this works but I'll take it.