how to point correctly to static image in django

Question

I have a template that renders an image:

{% load staticfiles %}

<img src="{% static "img/logo.png" %}" alt="My image"/>

The image link is broken, but it points to:

localhost/static/img/logo.png

What are values I need to set for static_root, static_url, and STATICFILES_DIRS to get this image to show up correctly?

This is my directory structure:

myprojectname (top level)

--- myprojectname

--- --- myproectname

--- --- --- settings

--- --- --- --- base.py (setting.py)

--- --- static

--- --- --- img

This is my static configuration in settings:

STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    #normpath(join(SITE_ROOT, 'static')),
    os.path.join(BASE_DIR, "static"),
    '/Users/myuser/myprojectname/myprojectname/static',
)

This is what it shows: enter image description here

I have already done a collectstatic and this doesn't work.

What is your webserver environment? Are you running `manage.py runserver`, or do you have a proper webserver? Django doesn't usually serve static files at all, and you have to set up your webserver to serve them directly, except when you run `manage.py runserver`, which _does_ serve static files (since you have no webserver in that case to take that responsibility) — lanzz, Mar 27 '14 at 22:27
i'm running manage.py on my local machine. According to this running in dev will serve the files: https://docs.djangoproject.com/en/1.6/howto/static-files/ — Atma, Mar 27 '14 at 22:33
You would need to post the directory structure of your app in addition to your settings for STATIC_URL, and STATICFILES_DIRS to diagose the problem. — Brandon Taylor, Mar 28 '14 at 00:51
@Brandon I have added the directory structure and settings config. — Atma, Mar 31 '14 at 22:08

score 34 · Answer 1 · answered Apr 01 '14 at 03:23

Static files can be confusing in Django. I'll try to explain as simply as possible...

STATIC_ROOT This is the directory that you should serve static files from in production.

STATICFILES_DIRS This is the directory that you should serve static files from in development.

STATIC_ROOT and STATICFILES_DIRS cannot point to the same directory.

Django is a highly modular framework. Some application modules contain their own templates, css, images and JavaScript. Django admin is one such app. Django extends this modularity to applications you create by using different directories for static files in development versus production.

When DEBUG = True and you have included django.core.staticfiles in your INSTALLED_APPS, Django will serve the files located in the STATICFILES_DIRS tuple using the STATIC_URL path as the starting point.

In production this responsibility should be given to Nginx, Apache, CloudFront, etc. When DEBUG = False, Django will not automatically serve any static files.

When you run:

$ python manage.py collectstatic

The files specified in the STATICFILES_DIRS are copied into the STATIC_ROOT to be deployed.

So, to answer your question, I would do the following:

Create another directory to store your static files in development and add that path to your STATICFILES_DIRS. I usually call this folder "static-assets". It can reside at the same level as your existing "static" directory.

Set STATIC_ROOT to the path to your existing "static" directory.

If you look closely at the path that's returning a 404 in your screenshot, the image path is specified as: /static/img/logo.png, but your directory for images is: /static/image/

So double-check your image path to make sure you're pointing to the right directory.

thank you, please add more info because it is the one of the very difficult topic in django — giveJob, Feb 25 '19 at 15:20
You're welcome. Django has a lot of settings, and static files have tripped me up more than a few times. — Brandon Taylor, Feb 25 '19 at 15:25
Thank you for this comment. It's surprisingly difficult to find an explanation this clear in the documentation. — David Maness, Mar 16 '19 at 16:38
Yes, adding paths as needed to `STATICFILES_DIRS` is the way to go for development. When you want to deploy, you can look back at this variable to see the paths leftover from development and clean them up. This helps you stay organized during development and clean during production. — gmdev, Sep 01 '21 at 23:55

score 10 · Answer 2 · answered Apr 04 '14 at 08:24

Make folder "staticfiles" in root of your project where settings.py exists

In staticfiles you can go this way..

css
js
images

In settings.py

STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
                os.path.join(PROJECT_DIR,'staticfiles'), # if your static files folder is named "staticfiles"
)
TEMPLATE_DIRS = (
                os.path.join(PROJECT_DIR,'template'), # if your static files folder is named "template"
)

In base.html

<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}" /> 

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>

In other template files in which you include base.html

{% extends "base.html" %}
{% load static %}


<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>


<div id="yourID" class="yourClass">
    <img src="{% static "images/something.gif" %}" alt="something" >
</div>

this will help even if you plan to deploy your app on heroku, app engine or aws.. — 4dgaurav, Apr 04 '14 at 08:25

score 4 · Answer 3 · answered Mar 16 '20 at 19:00

If you are in development mode then define just one line:

STATICFILES_DIRS = ( os.path.join('static'), )

You don't need to define STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'

OR

STATICFILES_DIRS as BASE_DIR

So, working solution is :

STATIC_URL = '/static/'

STATICFILES_DIRS = ( os.path.join('static'), )

score 0 · Answer 4 · answered Aug 21 '21 at 06:22

actually I too was struggling with the same problem , it got resolved now , check javapoint documentation once its really good , another method that worked for me is change the path of static folder i.e place the static folder inside the app folder that u have created (in my case , the static folder is inside the first_app folder) . it should work . after that I relocated my folders back to where it was and to my surprise , it worked again!. sometimes it may be the fault of browser . I tried my level best to explain as I am a beginner in Django .

score 0 · Answer 5 · answered Jun 06 '22 at 14:35

If you want to save static files in Django you will need to do the following

in settings.py file you will have something like this `

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'my_project/static')  # where I want to host the static files i.e img, js & css
]

depends on how you have structure you files but you will need to have something like this in your urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
    path('', include('appfront.urls')),
    path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Final your template will have something like this Note the usage of static tag

{% load static %}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
    <div class="container">
      <a class="navbar-brand" href="{% url 'index' %}">
        <img src="{% static 'img/logo.png' %}" class="logo" alt="">
      </a>
'''

how to point correctly to static image in django

5 Answers5

Linked