Django static image not displaying

Question

I have looked every where possible, I have not found the answer to the issue I’m having. I spent hours in this and find not avail.

My front end was displaying all images and css with a static folder under the project or under the app tree.

After I did the changes to use a dynamic url, and created the static folder out of the project folder(one folder down) did collectstatic all of sudden my images have disappeared, css still works either direct path’d or dynamically.

I have tried the same with images, direct path(as a copy of the folder still remains in the project folder) the direct path does not work, neither the dynamic path.

Its not returning 404 either, on the first load, it returns 200, on second 304 as if the image was there on screen, but it isnt. There is just no errors, but darn image is not there.
What puzzles me is that the css works, but image does not display.

Bellow is my code.

—|settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),
  #'/var/www/static/',
]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")

—|url.py

if settings.DEBUG == True:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

—|main.html (template)

{% load staticfiles %}
 <img src={% static "images/banner_top.png" %}>

or

<img src="..static/images/banner_top.png">

or

<img src="static/images/banner_top.png">

on browser the image doesn’t show, but back end shows 200 and right path to image.

http://127.0.0.1:8000/static/images/banner_top.png

[22/Oct/2016 22:32:10] "GET /static/images/banner_top.png HTTP/1.1" 200 0

Here is the HEADER

GENERAL

Request URL:http://127.0.0.1:8000/static/images/banner_top.png
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8000

REQUEST

 Content-Length:0
 Content-Type:image/png
 Date:Sun, 23 Oct 2016 08:06:17 GMT
 Last-Modified:Fri, 21 Oct 2016 06:54:06 GMT
 Server:WSGIServer/0.1 Python/2.7.10

Asked By: Andy

||

Source

Answer 1

first I don’t understand why you set like below.

urls.py

if settings.DEBUG == True:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),
  #'/var/www/static/',
]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")

because you write static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) in urls.py and at the same time, your are using django.contrib.staticfiles app. If you put django.contrib.staticfiles in INSTALLED_APPS, It sever static files automatically. you can use static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) in urls.py when you want to sever static files manually.

please check serving static files during development

one option

1.you don’t use django.contrib.staticfiles.

INSTALLED_APPS = [
(...)
#    'django.contrib.staticfiles',
]

then serve static files maunally.

in urls.py

+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

in settings.py

STATIC_URL = '/static_cdn/'
STATIC_ROOT = os.path.join(BASE_DIR, "static_cdn")

if you collectstatic under project folder

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")

second option

1.you use django.contrib.staticfiles.

INSTALLED_APPS = [
(...)
'django.contrib.staticfiles',
]

STATIC_URL = '/static_cdn/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static_cdn"),
and other path
]

first, it will find static files under app folder tree(now I set STATIC_URL = '/static_cdn/', so in folder which has name as static_cdn). if you want to get static files not in app folder tree, you set STATICFILES_DIRS =

I don’t know why it return 200 and doesn’t show any image on your browser exactly. but I assume that you mixed two together and somehow it caused some problem. please check it.

I hope my idea is helpful for you! Good luck!

Answered By: Jayground

Answer 2

Well, problem has been solved. Koterpillar over #django IRC help me on figuring this out.

Somehow the system emptied the images files(corrupted) (which I think happened over collectstatic) and that’s why the images were loaded and nothing displayed.

upon checking

curl -D - http://127.0.0.1:8000/static/images/banner_top.png

which only returned the header and no content. So, following on check the images files and verifying that the contents where gone. I replaced with new images and then it was displayed again on website reload.

Many thanks to Koterpillar

Answered By: Andy

Answer 3

I went through the same problem. I was using Django 1.11
So the solution I found after several tweaks:-

This works: Without using {% load staticfiles %}

{% static '/images/banner_top.jpg' %}

Answered By: Nitish Kumar Pal

Answer 4

Press Ctrl+Shift+R . Press these 3 keys together

Answered By: Amina K M

Django static image not displaying

Question:

Answers: