title: Images from ImageField in Django don't load in template
body: <p>I'm building a gallery using Django(1.5.1) on my local machine. In my Album model I have a <code>ImageField</code>. There is a view to show all images of an album. It works well, but at the end images don't show up. There's border of images as you can see but images don't load.    </p>
  
  <h3>screenshot</h3>
  
  <p><img src="https://i.stack.imgur.com/nyExT.png" alt="enter image description here"></p>
  
  <h3>models.py</h3>
  
  <pre><code>class Category(models.Model):
   ###  
  class Album(models.Model):   
      category = models.ForeignKey(Category, related_name='albums')
   ###
  class Image(models.Model):
      album = models.ForeignKey(Album)
      image = models.ImageField(upload_to = 'images/albums/')
  </code></pre>
  
  <h3>views.py</h3>
  
  <pre><code>def detail(request, album_id):
      album = get_object_or_404(Album, pk=album_id)
      return render(request, 'gallery/detail.html', {'album': album})
  </code></pre>
  
  <h3>detail.html</h3>
  
  <pre><code>&lt;h1&gt;{{ album.title }}&lt;/h1&gt;
  {% for image in album.image_set.all %}
    &lt;a&gt;  &lt;img src="{{ image.image.url }}" height="420"&gt;&lt;/a&gt;
  {% endfor %}
  </code></pre>
  
  <p>If this is my album address: <code>http://localhost:8000/gallery/1/</code>  </p>
  
  <p>Then image URL is:<code>http://localhost:8000/media/images/albums/photo_4.JPG (I get 404 when enter it in browser)</code>  </p>
  
  <p>This media root and url:    </p>
  
  <pre><code>MEDIA_ROOT = '/media/'    
  MEDIA_URL = '/localhost:8000/media/'  
  </code></pre>
  
  <p>My media root has <em>777 permission</em>.</p>
  
  <p>What should I do now? Where is the problem?</p>