Static files in django when extending from template

Question

So i am having trouble loading my static files (images) in my template when extending from my base.html, so in my base.html the static files are working for example my favicon and my style are all loading. But when i want to load an image in my charts.html it does not work. To be clear the problem lies with the barchart_coins.png file.

This is my charts.html file

{% 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 %}

This is my base.html file

{% 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>

and this is part of my settings.py file

STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static/main'),
)

my file structure looks like the following

crypto_api_site
    >bitvavo_api
    >crypto_api_site
        >settings.py
    >main
        >static
             >main
                 >images
                      >barchart_coins.png
        >templates
             >main
                 >base.html
                 >charts.html

I hope I gave all the necesary files and I look forward to everybody suggestions.

Answer 1

I believe it should be the single quotes, not double on the inside of the static file: src"{% static 'images/barchart_coins.png' %}"

Answer 2

Looks like a little misunderstanding and mix of concepts. There are two options to collect static files from different folders into STATIC_ROOT :

STATICFILES_DIRS
and static subfolder within each app folder with STATICFILES_FINDERS enabled

In your config os.path.join(BASE_DIR, 'static/main') actually points to the crypto_api_site/static/main which does not exist. But AppDirectoriesFinder if it is enabled should catch folder main/static however after running collectstatic it would result in <STATIC_ROOT>/<APP_NAME>/<PATH_TO_FILE_AFTER_APP/STATIC> eg crypto_api_site/static_files/main/static/main/images/barchart_coins.png

thus {% static 'main/images/bitcoin_fav.png' %} would work because AppDirectoriesFinder will go to main/static and find there this relative path main/images/bitcoin_fav.png

however {% static "images/barchart_coins.png" %} will not work because there is no such file meeting [<STATIC_ROOT>|<app/static>]/images/barchart_coins.png path. If your template is in the main app - this not the reason to shorten static file url/path.

Finally:

define STATIC_ROOT folder explicitly
run collectstatic to see where it will go to find your static files and what folder structure it will produce
adjust your static file referencing in templates

Static files in django when extending from template

Question

2 answers

solution1
0 2022-09-15 19:04:06

solution2
0 2022-09-16 21:41:09

Static files in django when extending from template

Question

2 answers

solution1 0 2022-09-15 19:04:06

solution2 0 2022-09-16 21:41:09

solution1
0 2022-09-15 19:04:06

solution2
0 2022-09-16 21:41:09