How can I add css/image on webpage using django?

Question

I put the image("hi.png") and css file in /home/user1/djangoblog/blog/static

In templates i have <img src="{{ STATIC_URL }}images/hi.png" />

I edited the settings.py =>

STATIC_ROOT = ''
STATIC_URL = "/static/"

STATICFILES_DIRS = (
    "/home/user1/djangoblog/blog/static/",)

The web page source returns =>

<div><img src="/static/images/a.jpg" /></div>

If the views.py => The image is not displayed on the web page.

now = datetime.datetime.now()
#return render_to_response('current_datetime.html', {"foo": now}, context_instance=RequestContext(request))
t = loader.get_template('current_datetime.html')
c = Context({'foo': now})
return HttpResponse(t.render(c))

But if the views.py => it displays the images on the web page.

return render_to_response('current_datetime.html', {"foo": now}, context_instance=RequestContext(request))

It looks like it's a problem with HttpResponse or RequestContext. How can i fix this problem with HttpResponse or RequestContext?

I don't know why you keep getting voted down. Seems like a totally legitimate question since it's not always immediately apparent that you have to add the context processor in addition to adding staticfilses to your installed apps. — Jordan Reiter
– Jordan Reiter, Commented Jan 5, 2012 at 22:00
Use RequestContext instead of Context otherwise you don't get any of the variables created by TEMPLATE_CONTEXT_PROCESSORS. — Jordan Reiter
– Jordan Reiter, Commented Jan 6, 2012 at 14:35
I can't understand. What's the problem if i use Context instead of RequestContext? What do you mean by variables created by TEMPLATE_COnTEXT_PROCESSORS — cola
– cola, Commented Jan 6, 2012 at 14:40
My advice: stop right now, read the docs, read the Django book. Your question and subsequent comments to answers have revealed a lack of understanding of key concepts involved in creating a Django site. I'm not saying that to discourage you, but you need to wrap your head around this basic stuff before you move any further. — Chris Pratt
– Chris Pratt, Commented Jan 6, 2012 at 15:49
@guru: the variables that you need, like MEDIA_URL, etc. are all created by context processors listed in TEMPLATE_CONTEXT_PROCESSORS. Those variables are ONLY available if you use RequestContext instead of Context. Use Context only when you don't need those variables. Okay? Seems like you are digging yourself deeper and deeper into misunderstanding. There's no reason to change your STATIC_URL, there's no reason to use Context instead of RequestContext and actually you really should just use render_to_template or even just render unless you have a compelling reason otherwise. — Jordan Reiter
– Jordan Reiter, Commented Jan 6, 2012 at 16:19

Jordan Reiter · Accepted Answer · 2012-01-06 16:24:47Z

3

You need to read the staticfiles docs more carefully.

You specify the absolute path to your static directory with STATIC_ROOT and the URL that directory can be accessed at through a browser via STATIC_URL. Your main static directory should never go in STATICFILES_DIRS. That setting is only to allow you to specify additional directories that should be processed while running the collectstatic management command.

In general, you never use your actual static directory. In development Django serves files from each app's static directory and any directories in STATICFILES_DIRS (excluding the main static directory). In production, you run the collectstatic management command and then setup your main webserver (Apache, Nginx, etc) to serve files from STATIC_ROOT. Django never serves anything from the main static directory (STATIC_ROOT).

edited Jan 6, 2012 at 16:24

Jordan Reiter

21.1k12 gold badges100 silver badges170 bronze badges

answered Jan 5, 2012 at 16:35

Chris Pratt

240k37 gold badges414 silver badges468 bronze badges

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

11 Comments

cola Over a year ago

I'm running with python manage.py runserver , not using apache, so what will be the settings.py? Can you post a correct settings.py for css/image/javascript use?

Chris Pratt Over a year ago

It depends on your environment, but typically STATIC_ROOT = os.path.join(os.path.dirname(__file__), 'static') and STATIC_URL = '/static/'

cola Over a year ago

I used it,

import os                                         STATIC_ROOT = os.path.join(os.path.dirname(__file__), 'static')  STATIC_URL = '/static/'

But still didn't work. Its not getting the static/ folder, In template, {{ STATIC_ROOt }} and {{ STATIC_URL }} prints nothing.

cola Over a year ago

I updated the original post/question, see that again to understand.

Chris Pratt Over a year ago

STATIC_URL should be the path off localhost:8000 or the URL to your static server if you're using a separate server for static resources (i.e. http://static.mydomain.com). You have the physical path on your hard drive.

|

Jordan Reiter · Accepted Answer · 2012-01-05 21:54:20Z

3

I suspect the problem is that you don't have the staticfiles context processor in your settings file. That's the reason that /static/ isn't being inserted where you've put {{ STATIC_URL }}.

It's as simple as putting

'django.core.context_processors.static',

Into the list of context processors (TEMPLATE_CONTEXT_PROCESSORS) in your settings.py file.

Update

I added this in TEMPLATE_CONTEXT_PROCESSORS but still that didn't work. – guru 3 hours ago

Adding 'django.core.context_processors.static' to the list of context processors did fix your problem because as you can now see, it is inserting the value for STATIC_URL wherever it sees {{ STATIC_URL }} in your templates. The error is that you've changed the value of STATIC_URL to "/home/user1/djangoblog/blog/static/" probably because you've been confused by some of the answers here.

Change the value of STATIC_URL back to '/static/' so that line should read

STATIC_URL = '/static/'

That will fix your problem.

Django templates simply put whatever is in the variable into the template. They don't care what it is or what it represents. If the value of STATIC_URL is /home/user1/djangoblog/blog/static/ then it dutifully inserts /home/user1/djangoblog/blog/static/ wherever it sees {{ STATIC_URL }} which is why you are seeing

<img src="/home/user1/djangoblog/blog/static/images/a.jpg" />

whenever it renders the template containing <img src="{{ STATIC_URL }}images/a.png" />

edited Jan 5, 2012 at 21:54

answered Jan 5, 2012 at 17:27

Jordan Reiter

21.1k12 gold badges100 silver badges170 bronze badges

5 Comments

cola Over a year ago

Where would i put this line? 'django.core.context_processors.static', in INSTALLED_APPS ? If i add it in INSTALLED_APPS i got error, Error: No module named static

cola Over a year ago

I added this in TEMPLATE_CONTEXT_PROCESSORS but still that didn't work.

cola Over a year ago

I updated the original post/question, see that again to understand.

Jordan Reiter Over a year ago

Looks like you messed things up worse. I'll update my original answer.

cola Over a year ago

I updated the original post/question, see that again to understand

Collectives™ on Stack Overflow

How can I add css/image on webpage using django?

2 Answers 2

11 Comments

Update

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Update

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related