Serving uploaded images in Django

I ran into trouble while serving the uploaded images from database in template. In this post i'll  share what mistakes i made and how i rectified those mistakes.

Problem was :
In template the uploaded image was not showing like
{% for movi in all_movies %}
<div class="movie_frame">
<img src="{{MEDIA_URL}}{{ movi.poster}}" alt="xxx" height="140" width="110" />
</div>
{% endfor %}


For uploaded files one needs to set the MEDIA_ROOT and MEDIA_URL setting in settings.py.
setting.py
SITE_ROOT = os.path.dirname(os.path.realpath(__file__))
MEDIA_ROOT = os.path.join(SITE_ROOT, 'media')
MEDIA_URL = '/media/'

Note:
MEDIA_ROOT is a absolute physical location where the images are to be stored. This will create a 'media' folder under SITE_ROOT.
MEDIA_URL  is url reference which is to be used inside template to get the image.

Mistake 1: The value of MEDIA_URL is same as the MEDIA_ROOT value i.e. "media".

Correction : changed the MEDIA_URL value from "media" to "/site_media/". you can give any valid string but make sure it should not be same as of MEDIA_ROOT value.


models.py
from django.db import models
from imdbclone.settings import MEDIA_ROOT
class Movies(models.Model):
    title = models.CharField(max_length=50, blank=False)
    plot =  models.CharField(max_length=500, blank=True)
    actors = models.CharField(max_length=200, blank=True)
    poster = models.ImageField(upload_to=MEDIA_ROOT, blank=True)

here poster will save the image to MEDIA_ROOT which is already been there, that initially i thought.

Mistake 2: upload_to attribute of ImageField is MEDIA_ROOT , is wrong.

Correction : poster filed in database will have the absolute path to the image like /home/navyad/workspace/imdb/imdbclone/imdbclone/media/media/image.jpg, which is wrong.
I changed the upload_to attribute value from MEDIA_ROOT to "poi" (any valid string will work).
Note :
      a)  Corresponding to upload_to value a folder will be created, in this case "poi". This folder will be             created under MEDIA_ROOT. And this is where the image actually stored.
      b)  poster filed in database it will contain image reference like poi/image.jpg,



movies/urls.py :
from imdbclone import settings
from django.views.static import serve
urlpatterns = patterns('',

                           url(r'^site_media/(.*)$', serve, {'document_root': settings.MEDIA_ROOT}),  

)
In template when image is to be displayed using <img src ..> tag , it will make the request to get image. For that we have specified the url.

Mistake 3: placing url for image in wrong file.

Correction : I was using this for movies app and i placed the url for image in movies.urls , which supposed to be in the project main urls.py file alongside where setting.py live.

After correcting all the mistakes , and when image is loaded in template, i found this observation.
The <img src="" /> value  will be like
<img width="110" height="140" alt="xxx" src="/site_media/poi/image.jpg">
note 
src value : MEDIA_URL/upload_to/imagename


With these mistake i have learned how to serve the uploaded content using MEDIA_ROOT and MEDIA_URL.
At end i will share this quote :
If you're not making mistakes, then you're not doing anything. I'm positive that a doer makes mistakes.
John Wooden