include image files in Django templates shows broken link? - python

All,
I've tried the tips found on the forum. Unfortunately i'm still stuck.
The image doesn't appear in the template.
As far as i've traced the errors now they are twofold:
1) one where the picture should appear there is still a broke link and an error message:
Failed to load resource: the server responded with a status of 404 (NOT FOUND),
**http://127.0.0.1:8000/Point3D/grafiek/laptop.jpg**
So it does go in the right path, but can't find the image.. Which is in my MEDIA_ROOT
or I receive:
Resource interpreted as image but transferred with MIME type text/html with:
**http://127.0.0.1:8000/Point3D/grafiek/**
2) The other error is that if i go to : http://127.0.0.1:8000/media/ i get:
Permission denied: /media/
maybe this has something to do with it.
For the rest i've followed roberts solution for now but without any luck..
Any help would be very much appreciated!

What's your template looking like? It's should be something like:
<img src="{{ MEDIA_URL }}Point3D/grafiek/laptop.jpg" alt="" />
I'm guessing the right path for your image should be http://127.0.0.1:8000/media/Point3D/grafiek/laptop.jpg

Are you including {{ MEDIA_ROOT }} in your tag.
Also, make sure you are calling the template with a RequestContext object, because otherwise {{ MEDIA_ROOT }} will not be set in your template. Try using django.views.generic.simple.direct_to_template rather than django.shortcuts.render_to_response. Note that direct_to_template is called just like render_to_response except it takes request as the first argument.
from django.views.generic.simple import direct_to_template
# your view code here
return direct_to_template(request, 'path/to/template.html', **kwargs)

Assuming media on your file system is at:
/home/username/django-project/media/images/favicon.ico
In your settings.py, you should have:
import os
PROJECT_PATH = os.path.dirname(__file__)
MEDIA_ROOT = os.path.join(PROJECT_PATH, 'media')
MEDIA_URL = '/media/'
TEMPLATE_CONTEXT_PROCESSORS = (
'django.core.context_processors.media',
)
Your project urls.py should also contain the following which should only work in DEBUG mode:
if settings.DEBUG:
urlpatterns += patterns('',
url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT.replace('\\','/')}, name='media'),
)
Your template should include media like the following:
<link rel="icon" href="{{ MEDIA_URL }}images/favicon.ico" />

Permission denied on /media/ is exactly what is supposed to happen, as otherwise every user of you page could view all the files in that directory (Would be the same as configuring Apache to allow Indexing of a Directory, which is, in allmost al cases, not what you want. Try accessing the file in your browser by pasting the complete url, (and include the media url in your path!):
http://127.0.0.1:8000/media/Point3D/grafiek/laptop.jpg
If that does not work, make sure you have Django or Apache configured to serve the static files you try to access.
edit:
And one more thing that could cause your trouble: /media/ is the default for the admin media url. If your admin media url and your media url are the same thats no good. Change that so your MEDIA_URL and your ADMIN_MEDIA_PREFIX are not the same.

Related

Django serving dynamic Files

I have a problem about serving admin uploaded files in my templates.
I set:
MEDIA_URL='/media/'
MEDIA_ROOT = 'assets/'
and my models are like:
mainPhoto = models.ImageField(upload_to="articles/")
When in my templates, I try:
<img src="{{MEDIA_URL}}{{article.mainPhoto}}" />
The image doesn't show up on the website.
I found one deprecated solution with the django .serve(), but I hope to avoid using it.
I was looking everywhere and didn't find any answer, so I hope someone here will be able to help me.
There are two parts to make this work. First is the Django configuration. There are really two settings for this which you have already mentioned - MEDIA_URL and MEDIA_ROOT. As already noted in the comments the MEDIA_ROOT has to be an absolute path. For example:
MEDIA_ROOT = `/abs/path/to/project/media/`
Second part is actually serving the files. If you are in production, you NEVER want to serve your static or media files through Django so you should configure Apache or nginx or whatever server system you are using to serve the files instead of Django. If you are on the other hand still developing the app, there is a simple way to make Django serve media files. The idea is to modify your urls.py and use the Django's static files server to serve media files as well:
# urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# other patterns
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
More about this approach at Django docs.
Also FYI, you probably should not use {{MEDIA_URL}}{{article.mainPhoto}} to get the url of an image. This approach will break for example if you will no longer use file system storage for static files and will switch to something different like Amazon S3. It is always a good idea for the storage backend to figure out the url:
<img src="{{article.mainPhoto.url}}" />

Django CSS. I get the HTML page with no CSS

I have had this problem for a while now, I have been trying to move my CSS file all over the place and changing the settings, and even messing with the media url stuff, which I don't believe I should be now that I have read other questions.
My CSS file is in the /home/justin/test/static/ directory. My templates are in the /test/templates directory.
My settings are:
STATIC_ROOT = '/home/justin/test/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
'/home/justin/test/static/',
)
My urls are:
urlpatterns = patterns('',
url(r'^$', 'views.home'),
# Static Files
url(r'^static/(?P<path>.*)$','django.views.static.serve', {'document_root':settings.MEDIA_ROOT}),
)
I have all three in my main template.
<link rel="stylesheet" href="/static/style.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}/style.css" />
They come out:
<link href="/static/style.css" rel="stylesheet"></link>
<link href="style.css" rel="stylesheet"></link>
<link href="/style.css" rel="stylesheet"></link>
The first comes out to the correct file, but it doesn't work.
Any help is really appreciated. Thank you.
My views.py:
from django.shortcuts import render_to_response
def home(request):
return render_to_response('index.html',{})
My error from the terminal is:
[16/Aug/2013 21:00:21] "GET /static/style.css HTTP/1.1" 500 1729
You need to pass request in RequestContext of your views
def home(request):
return render_to_response('index.html', locals(), context_instance = RequestContext(request))
Only then your session data will be passed to the template and {{ STATIC_URL }} will work.
Here are some tips to help you solve this problem.
First, anything to do with MEDIA_ is referring to files that are uploaded to the system by users; and STATIC_ refers to files that are part of your application.
STATIC_ROOT should point to the file system path where the collectstatic command will dump all the static files from all your applications. When you are deploying the application into a production environment, you run collectstatic (which will overwrite everything in the directory pointed to by STATIC_ROOT) and then copy the contents of this directory to a location that is mapped to the url that STATIC_URL points to.
In summary:
If your application needs any static files (images, javascript, css, etc.) create a directory called static in your application's directory (the same location where you have models.py) and add the files there.
STATIC_ROOT should point to a directory where all the images, css, javascript, etc. will be dumped by the collectstatic command. This is only used when you want to move your application to a production server. The collectstatic command will grab all the files in all the static directories in your applications that are listed in INSTALLED_APPS (including the ones from the django.contrib like the admin interface) and dump them in this directory. You would then take this directory and copy or move it to your web server.
STATICFILES_DIRS is a directory where any static files that are not part of any specific application should be stored. If this location is set, then django will also look here for static files.
STATIC_URL = the URL path that is configured in your web server to point to the location where all the files in STATIC_ROOT are located.
The {% static %} tag will always point to the STATIC_URL variable. In order to use this tag you must have {% load staticfiles %} at the top of any template that is using the tag; even if the template is inheriting from one that already as the load line in it.
You don't need anything fancy in your urls.py unless you are using django to serve your static files (which you should not do). Use the web server to handle static files. If you are running with DEBUG = True and using runserver, then django will take care of handling static files for you automatically as a courtesy during development.
For any user uploaded files which are controlled by the various MEDIA_* settings you need to handle these manually during development; and for this you can use the following snippet in your urs.py. Again, keep in mind this is only for development - do not use this in production:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
)
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
Please read the static files section in the manual; from where I have summarized the above points.
Finally, you should use the render shortcut when using methods in your views. This makes sure that the proper request context is always sent.
you must use this tag ({% load static from staticfiles %}) in your template :
{% load static from staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
In your urls, you should serve from the STATIC_ROOT not the MEDIA_ROOT setting
url(r'^static/(?P<path>.*)$','django.views.static.serve', {'document_root':settings.STATIC_ROOT})
Also, you need to pass RequestContext on your views, like stated in other answers.
In development mode (which means DEBUG=True in settings.py), to serve static files
Simply put the following lines in urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# ... the rest of your URLconf here ...
urlpatterns += staticfiles_urlpatterns()
In production mode, you should use nginx/apache in front of django to serve static files.
Refs: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/
There's a line in your question:
url(r'^static/(?P<path>.*)$','django.views.static.serve', {'document_root':settings.MEDIA_ROOT}),
Normally, settings.MEDIA_ROOT is for user uploaded files, which is a different folder from settings.STATIC_ROOT.

Django 1.3 Static Files

Like the 1 billionth static file question about Django 1.3. I've been searching and trying so many things but nothing seems to work for me. Any help would be appreciated. Will try and give as much information as possible.
URL FILE
urlpatterns = patterns('',
url(r'^projectm/statictest/$','project_management.views.statictest'),)
VIEW
def statictest(request):
return render_to_response('statictest.html',locals())
TEMPLATE
<html><head><title>Static Load Test Page</title></head>
<body>
{% load static %}
<img src="{{ STATIC_URL }}testimage.jpg" />
</body></html>
SETTINGS
STATIC_ROOT = '/home/baz/framework/mysite/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = ('',)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
TEMPLATE_DIRS = (
"/home/baz/framework/mysite/templates"
FILES
-bash-3.2$ pwd
/home/baz/framework/mysite/templates
statictest.html
-bash-3.2$ pwd
/home/baz/framework/mysite/project_management/static
-bash-3.2$ ls
testimage.jpg
Not too sure if there is any other information that would be helpful. But basically when I go to this test page and check the page source, the url is pointing to
<img src="/static/testimage.jpg" />
However the image does not load. I have tried this on multiple browsers too. Maybe I am missing an imort statement somewhere?
cheers for the help
Are you using the built in runserver command or do you serve the Django app some other way?
If you use runserver then your problem is that you don't tell Django where to find your static assets in the filesystem. You need to set STATIC_ROOT to a filesystem path where your static assets can be found. Try setting it to: /home/baz/framework/mysite/project_management/static/
If you are using a different server (like gunicorn behind Nginx for example) then it is the responsibility of the front-end server to intercept requests for /static/ and serve them for you.
Also remember to run the ‘collectstatic’ management command once you have set ‘STATIC_ROOT’.
https://docs.djangoproject.com/en/1.4/howto/static-files/#deploying-static-files-in-a-nutshell

Django static files when locally developing - how to serve absolutely?

This should be super simple, but somehow its has had me stuck all morning. I'm developing locally, using the django debug server, and with this filestructure:
/project/ (django project)
/static/ (static files)
In the settings.py MEDIA_ROOT and MEDIA_URL are both set to '/static/' and I'm using this in my urls.py
url(r'^(?P<path>.*)$', 'django.views.static.serve', {'document_root': '../static'}),
In my templates, the files that need to be server from the static directory are configured as such:
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
That all works as it should - the javascript/css/images are all served properly from the hompage. However, when I go to a subdirectory, such as http://127.0.0.1:8000/news/ then all the links are broken.
I've tried using a variety of the os.import options to get it to do the relative links properly, but havent had any luck. Is there a way that I could force it to be relative to the base url, or perhaps hardcode it to my filesystem?
Any help would be amazing!
In this line in your urls.py file, the '../static' should be changed to an absolute directory. Try changing it and see what happens.
Your file:
url(r'^(?P<path>.*)$', 'django.views.static.serve', {'document_root': '../static'}),
Should look more like:
url(r'^(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/full/path/to/static'}),
To give you an example, mine is set up a little differently, but I still use a full path.
Here's how mine is setup:
in settings.py
STATIC_DOC_ROOT = '/Users/kylewpppd/Projects/Django/kl2011/assets/'
and in urls.py:
(r'^assets/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_DOC_ROOT, 'show_indexes':True}),
I'm serving my static files from 'localhost:8000/assets/'.
I just had the same problem, and I solved it by removing first slash from STATIC_URL='/static/' and making it STATIC_URL = 'static/' just like philipbe wrote above.
Wierd thing is that '/media/' works fine for MEDIA_URL at the same time (while 'media/' breaks layout).
Anyway - just change STATIC_URL to be equal to 'static/' with no leading slash, and you'll solve it.
How do your links break when you go to a subdirectory? Can you explain that further please.
Does django 1.3 support some kind of strange relative url routing for static media?
If it can be served from the homepage but not others, doesn't that sound exactly like your STATIC_URL is a relative location?
What is your STATIC_URL? It should be absolute and start with a slash.

Django not recognizing the MEDIA_URL path?

So I'm trying to get TinyMCE up and running on a simple view function, but the path to the tiny_mce.js file gets screwed up. The file is located at /Users/home/Django/tinyMCE/media/js/tiny_mce/tiny_mce.js. I believe that /media/js/tiny_mce/tiny_mce.js is correct, as the development server has no access to files above the root of the Django project folder. In the rendered page, it says in the debugger that the javascript file was not found. This is because it was trying to look through /js/tiny_mce/tiny_mce.js without addressing the /media/ part of the pathname.
Anyway, here's the script snippet for the javascript in a template named 'simple.html'. <script type="text/javascript" src="{{ MEDIA_URL }}/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
And this is what the vital parts of my settings is like.
MEDIA_ROOT = os.path.join(_base, 'media')
MEDIA_URL = 'http://127.0.0.1:8000/media/'
ADMIN_MEDIA_PREFIX = '/media/'
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'tinymce',
)
It looks like your are using the debug server (your url is http://127.0.0.1:8000/...) . Did you install the static serve in your urls.py?
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes':True}),
)
The 'show_indexes':True options make possible to browse your media. Go to your medias root http://127.0.0.1:8000/media/ and see it there is something
You can either pass it to the template manually as others have suggested or ensure that you are using a RequestContext instead of plain Context. RequestContext will automatically populate the context with certain variables including MEDIA_URL and other media-related ones.
Example from docs:
def some_view(request):
# ...
return render_to_response('my_template.html',
my_data_dictionary,
context_instance=RequestContext(request))
It looks like ars has answered your real question… But you'll run into another problem: MEDIA_URL must be different from ADMIN_MEDIA_PREFIX. If they aren't, the ADMIN_MEDIA_PREFIX will take precedence. I usually fix this by changing ADMIN_MEDIA_PREFIX to /admin-media/.
Do you have the media context processor in your settings?
TEMPLATE_CONTEXT_PROCESSORS = (
'django.core.context_processors.media',
)
You might also try putting the following in your settings to see if the debug messages reveal anything:
TEMPLATE_DEBUG = True
Please read the official Django DOC carefully and you will find the most fit answer.
The best and easist way to solve this is like below.
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
The related url is: https://docs.djangoproject.com/en/1.5/howto/static-files/#serving-files-uploaded-by-a-user
Thanks a lot for your help everyone. I was able to solve it as
settings.py -->
MEDIA_ROOT = '/home/patrick/Documents/code/projects/test/media/'
MEDIA_URL = 'http://localhost:8000/media/'
urls.py -->
(r'^media/(?P<path>,*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),
index.html -->
img src="/media/images/logo.jpg"
Again, thanks a lot, I was going crazy trying to find out how to do all of this. This solution worked for me on a Django version 1.2.5 Development server running Ubuntu 10.04.
I had a similar problem,
I have a one-page-app and Apparently I had a newbie mistake that made django miss my media path i had this:
url(r'^', home, name="home"),
instead of this:
url(r'^$', home, name="home"),
the missing $ made my url pattern miss my media url
I was also having the same problem, this is how I got it done.
If you are using a FileField in your model class instead of MEDIA_URL use .url member to access the url of your file.
For eg: something like this
href = "{{ some_object.file_name.url }}"
here file_name is the FileField in model class.

Categories