Статические файлы в django при расширении из шаблона
У меня проблемы с загрузкой статических файлов (изображений) в моем шаблоне при расширении из моего base.html, поэтому в моем base.html статические файлы работают, например, мой favicon и мой стиль все загружаются. Но когда я хочу загрузить изображение в charts.html, это не работает.
Для ясности, проблема заключается в файле barchart_coins.png
.
Это мой файл charts.html
{% extends "main/base.html" %}
{% load static %}
{% block title %}Charts{% endblock %}
{% block subtitle %}<h1 class="h1">Welcome to your crypto wallet visualized</h1>{% endblock %}
{% block content %}
<img type="image/png" src"{% static "images/barchart_coins.png" %}" alt="barchart">
{% endblock %}
Это мой файл base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'main/css/style.css' %}">
<title>
{% block title %}<h1>You forgot to place a title in your file<h1>{% endblock %}
</title>
<link rel="icon" type="image/png" href="{% static 'main/images/bitcoin_fav.png' %}">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/overview">Overview</a></li>
<li><a href="/data">General data</a></li>
</ul>
</nav>
</header>
<div class="body">
{% block subtitle %}<h2>>ou forgot to place a subtitle in your file<h2>{% endblock %}
{% block form %}<p>You forgot to place a fom in your file</p>{% endblock %}
{% block content %}
<p>You forgot to place a content in your file</p>
{% endblock %}
</div>
<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://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
и это часть моего файла settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/images/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/main'),
)
моя файловая структура выглядит следующим образом
crypto_api_site
>bitvavo_api
>crypto_api_site
>settings.py
>main
>static
>main
>images
>barchart_coins.png
>templates
>main
>base.html
>charts.html
Надеюсь, я предоставил все необходимые файлы и жду предложений от всех желающих.
Я считаю, что это должны быть одинарные, а не двойные кавычки внутри статического файла: src"{% static 'images/barchart_coins.png' %}"
Похоже на небольшое недопонимание и смешение понятий. Есть два варианта сбора статических файлов из разных папок в STATIC_ROOT
:
В вашей конфигурации os.path.join(BASE_DIR, 'static/main')
фактически указывает на папку crypto_api_site/static/main
, которая не существует. Но AppDirectoriesFinder
, если он включен, должен перехватить папку main/static
, однако после запуска collectstatic
он приведет к <STATIC_ROOT>/<APP_NAME>/<PATH_TO_FILE_AFTER_APP/STATIC>
, например, crypto_api_site/static_files/main/static/main/images/barchart_coins.png