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 %}Welcome to your crypto wallet visualized{% endblock %}
{% block content %}
   
{% endblock %}

This is my base.html file

{% load static %}



    
    
                
    
    
        {% block title %}<h1>You forgot to place a title in your file<h1>{% endblock %}
    
    


    
        
            
                Home
                Overview
                General data
              
          
    
    
    {% block subtitle %}>ou forgot to place a subtitle in your file
{% endblock %}
    {% block form %}You forgot to place a fom in your file{% endblock %}
    {% block content %}
    You forgot to place a content in your file
    {% endblock %}

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.

Lewis Fletcher · Answer

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

Ivan Starostin · Answer

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 // 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 [|]/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

2 Answers