I'm just at my wits end here. I want to load my custom js files from the static folder.
When I view the source on Chrome, it's not showing up and it's not being loaded when I refresh the page.
What it looks like on Chrome (and I can't click on my file, while the jQuery does light up):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<script src="/static/js/ajax.js"/>
UPDATE:
Here is what I have now, but it's still not working
base.html
{% load staticfiles %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<script src="{% static 'js/ajax.js' %}"/>
settings.py
STATIC_ROOT = 'static/'
STATIC_URL = 'assets/'
STATICFILES_DIRS=(BASE_DIR, 'assets')
I ran python manage.py collectstatic and it copied a bunch of files over.
Here is a layout of the updated structure. You can see that the ajax.js was copied over but it's still not showing up when I run the server. Any ideas?
What am I missing?? Please help.
Python 2.7, Django 1.7
Obligatory reading:
https://docs.djangoproject.com/en/1.7/howto/static-files/
https://docs.djangoproject.com/en/1.7/ref/contrib/staticfiles/
https://docs.djangoproject.com/en/1.7/ref/settings/#static-files
About these settings:
STATIC_URL = 'assets/'
This means that your app should serve static files with assets/{name} prefix.
I think this is the source of your problem - the initial / is missing and you're generating relative links for static resources, which sounds like a Bad Idea.
Now a page at http://yourserver/foo/bar/ would ask for static files via a relative link:
<img src="assets/{name}">, so your browser would look in /foo/bar/assets/{name} and find nothing.
You'd normally want an absolute link for static files, so instead you should use STATIC_URL = '/assets/' and obtain absolute links <img src="/assets/{name}">.
STATICFILES_DIRS=(BASE_DIR, 'assets')
Okay, so how does Django find the static files? A Django project can have many installed applications, and each application can have its own directory with static files.
So there's this setting (set by default):
STATICFILES_FINDERS = (
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder")
This means that, on development setup (runserver), whenever someone asks for http://yourserver/assets/ponies/applejack.jpg (where /assets/ is your, now hopefully fixed, STATIC_URL), Django would try to find a file ponies/applejack.jpg in the following way:
first by using FileSystemFinder that looks in some fixed directories you specify (STATICFILES_DIRS),
second by using AppDirectoriesFinder that looks into the static/ subdirectory of each of your INSTALLED_APPS.
So if you want to keep your static files per-app, you don't need to rely on FileSystemFinder and you can leave STATICFILES_DIRS empty.
But if you want to keep all the static files in one place, point STATICFILES_DIRS to any directory like you did. You should still keep AppDirectoriesFinder for third party apps you use, like the Django Admin, that come with their own static files.
STATIC_ROOT = 'static/'
This is unnecessary for development setup with runserver because Django dev server serves your static files itself.
For production, however, you probably want your web server (Apache, Nginx, ...) or a content delivery network to handle the static file delivery for you. You can then use the collectstatic command to collect all the static files from everywhere (e.g. all static files your STATICFILES_FINDERS can find), and put them all in one directory on your machine, from where you can easily pass them on to Nginx or copy over to a CDN.
Do you have this in your settings?
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# django.contrib.staticfiles.finders.DefaultStorageFinder',
)
In the documentation https://docs.djangoproject.com/en/dev/howto/static-files/
I read that static files should be put with their respective apps and called upon with
{% load staticfiles %}
<img src="{% static "articles/css/base.css" %}" alt="My image"/>
However later on in the docs it mentions that some static files don't pertain to a particular app. This is where STATICFILES_DIRS comes into play. If I read correctly STATICFILES_DIRS is a tuple for Django to use to look for other static files. I was wondering how would I call the static files that was called from the STATICFILES_DIRS?
ex: something like
<link rel="stylesheet" type="text/css" href="{% static "/css/default.css" %}">
Also I am not sure what to put for my STATIC_ROOT. Do I leave it empty? ('')
My proj tree
mysite
\articles
\static
\articles
\css
base.css
\static
\images
\css
default.css
\js
\templates
base.html
\settings.py
This is currently in my settings.py regarding static files
# looks for static files in each app
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_STORAGE = (
'django.contrib.staticfiles.storage.StaticFilesStorage'
)
# the absolute path to the directory where collectstatic will collect static files for deployment (OUTPUT)
STATIC_ROOT = ''
# This setting defines the additional locations the static files app will traverse if the FileSystemFinder finder is enabled.
STATICFILES_DIRS = (
# used for static assets that aren't tied to a particular app
os.path.join(BASE_DIR, 'static'),
)
# URL to use when referring to static files located in STATIC_ROOT
STATIC_URL = '/static/'
Almost everything about django static is related to the django.contrib.staticfiles app. Although you need to custom edit many settings to make staticfiles work, what is does is simple. It provides a collectstatic command which collects static files from different app and put them into a single directory.
The answer to your first question is simple: Put those common static files under the /static directory of your django project directory. In your case, it's mysite/static.
Reason: First, it's the official way. You can find the following code in official doc: Managing static files (CSS, images). Second, it's reasonable. Since we put static files only used in a single app under project/appnane/static/... The project's static dir should follow the same name pattern.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"), # That's it!!
'/var/www/static/',
)
As I said in the comment, your should not set STATIC_ROOT to project_absolutr_path/static. Because that directory is user to put css app static files. You don't want the collectstatics command to pollute that directory especially when you are using a version control system like git/svn.
STATIC_ROOT really depends on the way you host these static files(Apache, Nginx, S3, CDN, Paas like heroku)
Ive checked over quite a few of the other threads on being unable to serve static content using the static file app within Django but as yet have yet to find a solution.
settings.py
STATIC_ROOT = '/opt/django/webtools/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
"/home/html/static",
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
Template
relevant line....
<img src="{{ STATIC_URL }}macmonster/img/macmonster-logo-blue.png" >
Logs
From the logs it looks like the path is correct, but alas it is still resulting in a 404..
[10/Feb/2013 16:19:50] "GET /static/macmonster/img/macmonster-logo-blue.png HTTP/1.1" 404 1817
[10/Feb/2013 16:19:51] "GET /static/macmonster/img/macmonster-logo-blue.png HTTP/1.1" 404 1817
For local serving of static files, if you haven't set up any form of collecting of staticfiles and if you're running Django 1.3+, I believe this is the way your settings.py should look like when refering to static files
# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = ''
# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/Users/cupcake/Documents/Workspaces/myDjangoProject/someOtherFolderPerhapsIfYouWant/static',
)
# List of finder classes that know how to find static files in
# various locations.
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
Notice that I've left out the STATIC_ROOT here.
This is because I don't have the need for static files collection "just yet".
The collecting of static files is to allieviate(spelling) the problems with serving multiple diffrent staticfiles folders, so they merged the staticfiles app that was used normally for helping with this problem.
What this does, and it's described in the docs, is to take all the static files from all your apps and put them into one (1) folder for easier serving when putting your app into production.
So you're problem is that you've "missed" this step and that's why you're getting a 404 when trying to access them.
Therefore you need to use a absolute path to your static files ie. on a mac or unix system it should look something like this:
'/Users/cupcake/Documents/Workspaces/myDjangoProject/someOtherFolderPerhapsIfYouWant/static',
Also, you could simplify and "fix" the need of having a hardcoded path like that which I used for illustration and do like this
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATICFILES_DIRS = (
PROJECT_ROOT + '/static/'
)
This would fix the portability problem as well. A good Stackoverflow post about that is found here
I hope I made it a bit clearer, otherwise please correct me if I'm wrong ^_^!
For collecting and how to manage static files in the newer versions of Django read this link
The staticfiles app
Change
STATIC_URL = '/static/'
set
STATIC_URL = 'http://yourdomain.com/static/'
it's unbelievable but, after 1 hour searching it solution solve my problem with static files and remove STATIC_ROOT from STATICFILES_DIRS.
STATICFILES_DIRS is just for collecting all the static in modules and store it in STATIC_ROOT.
So i've been googling this issue for the past hour and can't come up with a solution. Basically this is it: in my model.py i have a class that has this
class Case(models.Model):
zoomOutImage = models.ImageField('Label', upload_to="zoomOutImage")
and in my settings.py i have my media URL/ROOT set up like this
MEDIA_ROOT = os.path.join(os.path.abspath(''),'app/static/ds/')
MEDIA_URL = '/static/ds/'
which from the webserver should serve out like this:
http://127.0.0.1:8000/static/ds/zoomOutImage/actinic_granuloma_3.jpg
I've installed PIL (inside virtualENV) and there are no errors in uploading, the only issue is when i try uploading the file via the admin panel nothing happens. No errors nothing. The file just simply doesn't get uploaded to the zoomOutImage folder by the development server. Can anyone point me towards why?
I guess your file is in a subdir of your root, subdir named 'zoomOutImage'. Or even a file called like that in the root. I remember putting a function call in the upload to string. That function creates a path and filename, using os.join and the filename from the instance. Doing this by head, no example code available right now. But must be able to google this.
Look here https://stackoverflow.com/questions/1190697/django-filefield-with-upload-to-determined-at-runtime
And by the way, I totally disagree with your answer, you should NEVER use absolute paths in your settings! See this answer use css in django 1.4 development for how to use the correct settings and refer to your Project PATH
EDIT (after reading your own answer)
Guess you are missing this first step:
this is the path to your settings.py file:
SETTINGS_DIR = os.path.dirname(os.path.realpath(__file__))
and than this is the path to your project dir: (I Am using buildout, so call it buildout, but it's the root of your project):
BUILDOUT_DIR = os.path.abspath(os.path.join(SETTINGS_DIR, '..'))
and from there on you can define everything you want:
STATIC_ROOT = os.path.join(BUILDOUT_DIR, 'var', 'static')
STATIC_URL = '/static_media/'
MEDIA_ROOT = os.path.join(BUILDOUT_DIR, 'var', 'media')
MEDIA_URL = '/media/'
and in your template file refer to the image like:
<img src="{{MEDIA_URL}}{{ case.zoomOutImage }}" width="100%">
when your object given to the template is called case
about your question of the urls.
you should add this:
if settings.DEBUG:
urlpatterns += patterns('',
(r'', include('staticfiles.urls')),
)
and see the link above to the question about using css, it's the same problem, but there for finding the css files during development. It's all about the static file places.
import os
# get abspath
def rel(*x):
return os.path.join(os.path.abspath(os.path.dirname(__file__)), *x)
MEDIA_ROOT = rel('media')
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
STATIC_ROOT = '' #if only your static files are in project folder
STATICFILES_DIRS = ( rel('static'),) #if only your static files are in project folder
use this settings, and everything will work
so i finally solved my problem. For anyone having this issue in the future do the following:
if you're trying to serve static media files locally on the development server use absolute paths for MEDIA_ROOT and MEDIA_URL.
I'm new to Django and I'm trying to learn it through a simple project I'm developing called 'dubliners' and an app called 'book'. The directory structure is like this:
dubliners/book/ [includes models.py, views.py, etc.]
dubliners/templates/book/
I have a JPG file that needs to be displayed in the header of each Web page. Where should I store the file? Which path should I use for the tag to display it using a template? I've tried various locations and paths, but nothing is working so far.
...
Thanks for the answer posted below. However, I've tried both relative and absolute paths to the image, and I still get a broken image icon displayed in the Web page. For example, if I have an image in my home directory and use this tag in my template:
<img src="/home/tony/london.jpg" />
The image doesn't display. If I save the Web page as a static HTML file, however, the images display, so the path is correct. Maybe the default Web server that comes with Django will display images only if they're on a particular path?
Try this,
settings.py
# typically, os.path.join(os.path.dirname(__file__), 'media')
MEDIA_ROOT = '<your_path>/media'
MEDIA_URL = '/media/'
urls.py
urlpatterns = patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT}),
)
.html
<img src="{{ MEDIA_URL }}<sub-dir-under-media-if-any>/<image-name.ext>" />
Caveat
Beware! using Context() will yield you an empty value for {{MEDIA_URL}}. You must use RequestContext(), instead.
I hope, this will help.
In production, you'll just have the HTML generated from your template pointing to wherever the host has media files stored. So your template will just have for example
<img src="../media/foo.png">
And then you'll just make sure that directory is there with the relevant file(s).
during development is a different issue. The django docs explain it succinctly and clearly enough that it's more effective to link there and type it up here, but basically you'll define a view for site media with a hardcoded path to location on disk.
Right here.
I do understand, that your question was about files stored in MEDIA_ROOT, but sometimes it can be possible to store content in static, when you are not planning to create content of that type anymore.
May be this is a rare case, but anyway - if you have a huge amount of "pictures of the day" for your site - and all these files are on your hard drive?
In that case I see no contra to store such a content in STATIC.
And all becomes really simple:
static
To link to static files that are saved in STATIC_ROOT Django
ships with a static template tag. You can use this regardless if
you're using RequestContext or not.
{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />
copied from Official django 1.4 documentation / Built-in template tags and filters
In development
In your app folder create folder name 'static' and save your picture in that folder.
To use picture use:
<html>
<head>
{% load staticfiles %} <!-- Prepare django to load static files -->
</head>
<body>
<img src={% static "image.jpg" %}>
</body>
</html>
In production:
Everything same like in development, just add couple more parameters for Django:
add in settings.py STATIC_ROOT = os.path.join(BASE_DIR, "static/")(this will prepare folder where static files from all apps will be stored)
be sure your app is in INSTALLED_APPS = ['myapp',]
in terminall run command python manage.py collectstatic (this will make copy of static files from all apps included in INSTALLED_APPS to global static folder - STATIC_ROOT folder )
Thats all what Django need, after this you need to make some web server side setup to make premissions for use static folder. E.g. in apache2 in configuration file httpd.conf (for windows) or sites-enabled/000-default.conf. (under site virtual host part for linux) add:
Alias \static "path_to_your_project\static"
Require all granted
And that's all
I have spent two solid days working on this so I just thought I'd share my solution as well. As of 26/11/10 the current branch is 1.2.X so that means you'll have to have the following in you settings.py:
MEDIA_ROOT = "<path_to_files>" (i.e. /home/project/django/app/templates/static)
MEDIA_URL = "http://localhost:8000/static/"
*(remember that MEDIA_ROOT is where the files are and MEDIA_URL is a constant that you use in your templates.)*
Then in you url.py place the following:
import settings
# stuff
(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),
Then in your html you can use:
<img src="{{ MEDIA_URL }}foo.jpg">
The way django works (as far as I can figure is:
In the html file it replaces MEDIA_URL with the MEDIA_URL path found in setting.py
It looks in url.py to find any matches for the MEDIA_URL and then if it finds a match (like r'^static/(?P.)$'* relates to http://localhost:8000/static/) it searches for the file in the MEDIA_ROOT and then loads it
/media directory under project root
Settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
urls.py
urlpatterns += patterns('django.views.static',(r'^media/(?P<path>.*)','serve',{'document_root':settings.MEDIA_ROOT}), )
template
<img src="{{MEDIA_URL}}/image.png" >
If your file is a model field within a model, you can also use ".url" in your template tag to get the image.
For example.
If this is your model:
class Foo(models.Model):
foo = models.TextField()
bar = models.FileField(upload_to="foo-pictures", blank = True)
Pass the model in context in your views.
return render (request, "whatever.html", {'foo':Foo.objects.get(pk = 1)})
In your template you could have:
<img src = "{{foo.bar.url}}">
Your
<img src="/home/tony/london.jpg" />
will work for a HTML file read from disk, as it will assume the URL is file:///home/.... For a file served from a webserver though, the URL will become something like: http://www.yourdomain.com/home/tony/london.jpg, which can be an invalid URL and not what you really mean.
For about how to serve and where to place your static files, check out this document. Basicly, if you're using django's development server, you want to show him the place where your media files live, then make your urls.py serve those files (for example, by using some /static/ url prefix).
Will require you to put something like this in your urls.py:
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': '/path/to/media'}),
In production environment you want to skip this and make your http server (apache, lighttpd, etc) serve static files.
Another way to do it:
MEDIA_ROOT = '/home/USER/Projects/REPO/src/PROJECT/APP/static/media/'
MEDIA_URL = '/static/media/'
This would require you to move your media folder to a sub directory of a static folder.
Then in your template you can use:
<img class="scale-with-grid" src="{{object.photo.url}}"/>
I tried various method it didn't work.But this worked.Hope it will work for you as well. The file/directory must be at this locations:
projec/your_app/templates
project/your_app/static
settings.py
import os
PROJECT_DIR = os.path.realpath(os.path.dirname(_____file_____))
STATIC_ROOT = '/your_path/static/'
example:
STATIC_ROOT = '/home/project_name/your_app/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS =(
PROJECT_DIR+'/static',
##//don.t forget comma
)
TEMPLATE_DIRS = (
PROJECT_DIR+'/templates/',
)
proj/app/templates/filename.html
inside body
{% load staticfiles %}
//for image
img src="{% static "fb.png" %}" alt="image here"
//note that fb.png is at /home/project/app/static/fb.png
If fb.png was inside /home/project/app/static/image/fb.png then
img src="{% static "images/fb.png" %}" alt="image here"
I've had the hardest time figuring this out so I am making this post to explain as clearly as i can, what worked for me, to help someone else.
Let's say you have a project called project_name. and an app called app_name. your root directory should look like this:
/app_name
/project_name
manage.py
DEVELOPMENT.
while in development mode, your CSS and JS files should be inside ./app_name/static/app_name/..
however your images should be inside ./app_name/static/media/..
now add these to settings.py :
If this not already there, add
STATIC_URL = '/static/'
This tells Django where to find all the static files.
MEDIA_URL = '/media/'
This points Django to the folder where your images are, after it loads static. In this case it is /media/ because our images are in /static/media.
next, you should put this in the individual template where you need the image (I thought putting a single {% load static %} in the general layout.html template would suffice, it didn't):
{% load static %}
<img src="{% static image_name %}>
depending on how you set up your project, image_name could be the exact name of the image file like "image.jpg", a variable for an image field like user.image etc
lastly, go into the project_name urls.py (same folder as settings.py) and add this line to the end:
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
basically telling Django to use a work around so you can see use the images in development.
That is all. your project will now display images while you are writing and testing your code(development)
PRODUCTION.
When you want to deploy your project, there are some extra steps you need to take.
Because Django does not serve images as static files during production, you have to install a Middleware called Whitenoise.
http://whitenoise.evans.io/en/stable/#installation
pip install whitenoise
Then add the following to settings.py:
look for MIDDLEWARE and add just under django.middleware.security.SecrutiyMiddleware:
'whitenoise.middleware.WhiteNoiseMiddleware',
Next we have to define our paths, this is because in production Django will basically collect all the static files from all our apps and rearrange them in a single folder.
Add the following to settings.py:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
This tells Django where to put static files when it collects them. In this case we are telling Django to put the files in the root folder. so after collectstatic runs our app would look like
/app_name
/project_name
/static
manage.py
Then add:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
This tells django where to put files that a user who on our site uploads..
Next,we want to go up and change Debug to False.
Debug = False
Debug mode is used for testing in development, and in production you don't want your app displaying error codes and the names of files and lines where something went wrong. potential security threat. Once you turn debug mode to false, Django changes how it serves the static files. so ordinarily, if you were to run your app now, you won't see the images..
with these done, now you are ready for production. to test that everything is okay, you can run:
python manage.py collectstatic
(type yes if prompted)
Django will collect all the static files and arrange them as necessary. if you run your project now, with debug still turned off you should see your images. you can even now delete the individual static folders in app_name or any other apps you have, if you want because Django will not use them in production. Once debug is off, Django only uses static from the collected static folder.
You can now deploy your project
If you give the address of online image in your django project it will work.
that is working for me. You should take a shot.
Also check that the problem may not be due to path, but file name or extension. While failing to dislay an image added to base.html template, the error was found related to image file extension. If you are storing the image in jpeg format, use .jpg as the extension in the img tag
<img src="{% static 'logo.jpg' %}" alt="Logo">.
Just give a try copying static folder from base path to public_html folder.
cp -r static/ ~/public_html/