how to point correctly to static image in django

Question

I have a template that renders an image:

{% load staticfiles %}

The im

Answer 1

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'), )

Answer 2

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.

Answer 3

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>