Ошибка при подключении картинки из статик файлов djangos

В статических файлах лежит картинка но когда я добавляю ее в html разметку то происходит ошибка

settings.py:

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


DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

layout.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'main_hd/css/zerostyle.css' %}">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'main_hd/css/header.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="{% static 'main_hd/css/main_swiper.css' %}">
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
                <div class="header__body">
                    <div class="header__burger">
                        <span></span>
                    </div>
                    <nav class="header__menu">
                        <ul class="header__items">
                            <li class="header-item header-main"><a href="">Главная</a></li>
                            <li class="header-item header-note"><a href="">Записаться</a></li>
                            <li class="header-item header-aboutus"><a href="">Про нас</a></li>
                            <li class="header-item header-item-services"><a href="">О нас</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        {% block content %}
        {% endblock %}
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
    <script src="{% static 'main_hd/js/header.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script src="{% static 'main_hd/js/main_swiper.js' %}"></script>
</body>
</html>

HomePage.html:

{% extends 'main_hd/layout.html' %}

{% block title %}{{ title }}{% endblock %}



{% block content %}
    <img src="{% static 'main_hd/img/01.jpg' %}" alt="">
{% endblock %}

Розполажение файлов (изображение): введите сюда описание изображения

Ты указываешь хранилище

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Но картинку пытаешься загрузить из статики

{% block content %}
    <img src="{% static 'main_hd/img/01.jpg' %}" alt="">
{% endblock %}

Но в статике они лежат в другой папке

Если не ошибаюсь то в этом файле у вас неправильно подключена картинка из-за того что нужно добавить подключение статики

HomePage.html:

{% extends 'main_hd/layout.html' %}

{% block title %}{{ title }}{% endblock %}



{% block content %}
    {% load static %}
    <img src="{% static 'main_hd/img/01.jpg' %}" alt="">
{% endblock %}

Скорее всего неправильно, потому что я не понимаю как устроено дерево вашего проекта. Лучше всего если у вас есть папка статики отдельно от всех приложений, и уже там размещать все что вам нужно. Попробуйте перечитать эту статью и попробовать сделать все так, как указано в ней.

Попробуйте так, должно помочь:

{% block content %}
    <img src="{% static '01.jpg' %}" alt="">
{% endblock %}
Вернуться на верх