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

Andy · Accepted Answer · 2016-10-23 23:56:37Z

3

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 Oct 23, 2016 at 23:56

Andy

1,2281 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jayground · Accepted Answer · 2016-10-23 00:53:34Z

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 Oct 23, 2016 at 0:53

Jayground

1,8971 gold badge19 silver badges34 bronze badges

5 Comments

Andy Over a year ago

I use if settings.DEBUG just to check on setting whether it is on debug or not, it does not affect the functionality of the system. None of what I have tried is working, my problems is lies on why it is returns 200, but images is just missing. It can find the directories and files, so the configuration is right somehow.

Jayground Over a year ago

I see. First I mentioned that because you don't need to put django.contrib.staticfiles in INSTALLED APP, or serve static files manually in urls pattern if you operate your code in your real sever not during development, right? because you are going to set static root for Apache server. and you are going to collect static files in designated folder for apache. (that's my idea) so I explained because it seems you mixed serving static files during development in my opinion(you posted localhost host).

Jayground Over a year ago

I will think about more what can cause your situation. 200 status but no image showing

Andy Over a year ago

I commented out on urls.py. It didnt affect the operaion of the system. Also, even if I code to use local static/images does not work. Anyway, either way I go with this, with outside(remote) static or inside static folder, only my css loads up properly. With collectstatic, it runs normally and does move files properly too. I have created a new project just check things out. With minimum changes, just to make app return template with image, images does not display. Was there any bug on django 1.10.2?

Jayground Over a year ago

Well, I tried to make same error you faced. but I couldn't get it. So image displayed like you don't have on screen with status 200? I wonder if only specific image happen like that or all images in your static folder have same problem. well, I really wanted to find clue why your problem happened, I tweaked my example code and tested. but I couldn't find out with my knowledge so far.

Nitish Kumar Pal · Accepted Answer · 2018-09-02 12:21:47Z

0

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' %}

edited Sep 2, 2018 at 12:21

answered Aug 31, 2018 at 20:07

Nitish Kumar Pal

2,9963 gold badges21 silver badges24 bronze badges

Comments

Amina K M · Accepted Answer · 2022-12-27 07:02:15Z

0

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

answered Dec 27, 2022 at 7:02

Amina K M

754 bronze badges

Collectives™ on Stack Overflow

Django static image not displaying

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related