Related
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/
I'm writing a view that displays a set of images on a page.
This is the model
#models.py
class Movie(models.Model):
title = models.CharField(max_length = 500)
poster = models.ImageField(upload_to = 'qanda/static/movie_posters')
#index.html
<img src = "{{ STATIC_URL }}movie_posters/{{ movie.poster }}"></a>
When I runserver, the image doesn't appear. The URL the image is trying to load is
http://127.0.0.1:8000/static/movie_posters/qanda/static/movie_posters/image.jpg
When the URL it should be trying to load is
http://127.0.0.1:8000/static/movie_posters/image.jpg
My assumption is that since movie.poster is located at 'qanda/static/movie_posters', when I render it on HTML, it is loading the Static URL (127.0.0:8000/static) and then the location 'qanda/static/movie_posters' at the end. How do I make the image render correctly?
There are two pieces of how image url is calculated.
First in your settings.py you define MEDIA_ROOT. MEDIA_ROOT specifies an absolute folder on your computer where media will be stored. So for example for these settings:
MEDIA_ROOT = '/abs/path/to/media/'
and if you have a field
models.ImageField(upload_to='movie_posters')
then images will be stored at:
/abs/path/to/media/movie_posters/
/abs/path/to/media/movie_posters/poster.jpg <- example
This deals with where media is stored on your hard drive.
Second piece is how to calculate urls for these media files. For that you define MEDIA_URL in your settings.py. That essentially maps a URL to your MEDIA_ROOT location. So then if your MEDIA_URL is:
MEDIA_URL = 'http://localhost/media/'
Then if you want to access an image stored at movie_posters/poster.jpg which has an absolute path of /abs/path/to/media/movie_posters/poster.jpg, its URL should be http://localhost/media/movie_posters/poster.jpg. You can compute the URL by doing:
{{ MEDIA_URL }}{{ movie.poster }}
Please note that I am using MEDIA_URL instead of STATIC_URL. Those are not the same thing. Computing urls like that however is not very neat. Thats why Django's ImageField and FileField have an url attribute:
{{ movie.poster.url }}
Django will then compute the proper url depending on your MEDIA_URL setting.
Note:
For all of this to work, you have to have a separate media server running. Django does not serve any media files. In development it is only capable of serving static file (not same as media files). So in development one nice trick to serve media files is to use Python's simple web server. For that, open a new terminal (on Linux and Mac) or Command Prompt (on Windows) window/tab and navigate to your media folder. Then just execute the following command there:
python -m SimpleHTTPServer 8090
and make sure your setting is:
MEDIA_URL = 'http://localhost:8090/'
and then Python will serve your media files. That works nice for development.
If you want to serve your media just using the development server you can add this for the time being to your urls.py
urlpatterns = patterns( ...all your awesome urls...) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
you can define a custom template tag which returns the basename of the URL like this:
from django import template
import os
register = template.Library()
#register.filter
def getBasename(myURL):
return os.path.basename(myURL)
this should go in your custom template tags (eg. customTemplateTags.py) file within your templatetags directory of your app.
Then you can use the filter in order to get only the image filename, not the entire URL.
{% load customTemplateTags %}
<img src = "{{ STATIC_URL }}movie_posters/{{ movie.poster.url|getBasename }}"></a>
I am trying to reroute all of my /static content to host on Amazon S3. My first thought was to use global config['path'] throughout my jinja templates, but this won't work for external css and js files, plus it is kind of messy. I found the static_folder and static_url_path released in 0.7 and this seems like what I want. However, when I go to http://localhost:8000/static/img/abc.jpg it does not locate the files on S3. Am I using this feature right or is there some other way to do this?
Thanks!
I recently developed a Flask extension to deal with just this situation. It's called Flask-S3, and you can read the documentation for it here.
As an example, here is how you would integrate it into your Flask application:
from flask import Flask
from flask_s3 import FlaskS3
app = Flask(__name__)
app.config['S3_BUCKET_NAME'] = 'mybucketname'
s3 = FlaskS3(app)
You can use the extension to upload your assets to your chosen bucket:
>>> from my_application import app
>>> from flask_s3 import create_all
>>> create_all(app)
Flask-S3 is blueprint aware, and will upload all assets associated with any registered blueprints.
I wish the flask.Flask constructor's static_url_path argument would accept a full URI, but it screams about the path needing a leading slash when you try that. If it accepted it, you could just use url_for after setting static_url_path='http://my_s3_bucket.aws.amazon.com/' or so.
Another possible solution is to use a context processor. I believe this is the cleanest solution, but I don't have much experience with flask. It sure looks clean. Using a context processor, I pull the URL from the environment (I'm using heroku so it's wicked easy to set). Then the context processor makes the static_url variable available in my templates.
In app.py:
# Environment has STATIC_URL='http://my_s3_bucket.aws.amazon.com/'
#app.context_processor
def inject_static_url():
"""
Inject the variable 'static_url' into the templates. Grab it from
the environment variable STATIC_URL, or use the default.
Template variable will always have a trailing slash.
"""
static_url = os.environ.get('STATIC_URL', app.static_url_path)
if not static_url.endswith('/'):
static_url += '/'
return dict(
static_url=static_url
)
In the template:
<link rel="stylesheet" type="text/css" href="{{ static_url }}css/main.css" />
The result
<link rel="stylesheet" type="text/css" href="http://my_s3_bucket.aws.amazon.com/css/main.css" />
I know this is an old question but here's how I get around this issue.
Import Flask's url_for method under a different name (e.g., flask_url_for)
Create your own custom url_for method, which calls flask_url_for and then uses string replacement to add in your S3 bucket url.
I like this strategy because it's simple and intuitive to use, and the interface is exactly like the original url_for method.
from flask import url_for as flask_url_for
from flask import current_app
PRODUCTION_URL = 'https://s3.amazonaws.com/MY-BUCKET-NAME'
def url_for(path, **kwargs):
url = flask_url_for(path, **kwargs)
if url.startswith("/static") and not current_app.debug:
url = url.replace("/static", "", 1)
return PRODUCTION_URL + url
return url
what you are trying to accomplish is to be able to write
{{ url_for(app.static, file='img/abc.jpg', _external=True) }}
and have that resolve to a url in s3?
i believe that static_folder and static_url_path are setup so that if you call
app = Application('app', static_folder='foo', static_url_path='bar')
then going to
the above url_for would output
http://localhost:8000/bar/img/abc.jpg and it would look for static/img/abc.jpg in the filesystem.
i think what you want to do is potentially write a custom filter that would translate your path to an s3 url so that you could make a call something like
{{ 'img/abc.jpg'|s3_static_url }}
there's some documentation on that here: flask custom filters
What you need is the Amazon S3 public file URL instead of http://localhost:8000/static/img/abc.jpg. If its just a few files, maybe hardcode them in your template with the full URL or if you are going to have a local version for testing and use S3 on production site (like we do) then you can try the following method.
Define a new variable probably called STATIC_ROOT in the top of your base template (which other templates inherit), and use that as the file path prefix.
For example:
{% if app.debug %}
{% set STATIC_ROOT = url_for('static', filename='') %}
{% else %}
{% set STATIC_ROOT = 'http://s3.amazonaws.com/bucketname/' }
{% endif %}
This will give you the default path when you might be testing your application locally, and the public S3 url when in production (based on debug flag).
Using it:
<script src="{{ STATIC_ROOT }}js/jquery.min.js">
I am trying to serve static files from another domain (sub domain of current domain).
To serve all media files I used this settings:
MEDIA_URL =
'http://media.bud-inform.co.ua/'
So when in template I used
{{ MEDIA_URL }}
it was replace with the setting above. Now I am trying to serve admin media files from the same subdomain, I changed the settings this way:
ADMIN_MEDIA_PREFIX =
'http://media.bud-inform.co.ua/admin_media/',
and expected that all calls to media from my admin site will be made to this url.... But actually it didn't work this way, I still see paths to CSS made as following:
http://bud-inform.co.ua/media/css/login.css
Could you suggest how to serve admin media files correctly
MEDIA_URL and ADMIN_MEDIA_PREFIX are two different things. One is the location of your media files, while the other is the location of the django admin system's media files.
You have to make sure that the ADMIN_MEDIA_PREFIX points to somewhere where you're actually serving the admin media. Django doesn't handle that step for you.
The django admin media is at django/contrib/admin/media/. Copy or symlink that directory somewhere publicly visible and set ADMIN_MEDIA_PREFIX to reflect where you put it.
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/