Static files in django when extending from template-CodePudding

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 >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/[email protected]/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 >
    {% 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

CodePudding user response：

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

CodePudding user response：

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> e.g. 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