title: images from media file wont get displayed in django template
body: <p>I'm new to django and I've been playing around with uploading pictures then displaying them. ... well <em>trying</em> to display them. </p>
  
  <p>Whenever I try to display the image from a template, I just get the broken image link icon.</p>
  
  <p>I'm using the sqlite3 server</p>
  
  <p>settings.py
  </p>
  
  <pre class="lang-py prettyprint-override"><code>ROOT_DIR = os.path.dirname(os.path.dirname(__file__))
  def location(f):
      return os.path.join(ROOT_DIR, f)
  MEDIA_URL = 'http://127.0.0.1:8000/media/'
  MEDIA_ROOT = location('media/')
  </code></pre>
  
  <p>models.py</p>
  
  <pre class="lang-py prettyprint-override"><code>class Image(models.Model):
      image = models.ImageField(upload_to = 'images/')
  </code></pre>
  
  <p>views.py</p>
  
  <pre class="lang-py prettyprint-override"><code>from imageupload.settings import MEDIA_ROOT, MEDIA_URL
  
  def main(request):
      imgs = Image.objects.all()
      return render_to_response('index.html', {'images': imgs, 'media_root': MEDIA_ROOT, 'media_url': MEDIA_URL})
  </code></pre>
  
  <p>url.py</p>
  
  <pre class="lang-py prettyprint-override"><code>urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  
  <p>Right now I've just used the admin to upload images. And that seems to work fine, they go to where I expect</p>
  
  <p>But when I try to display them:<br>
  template</p>
  
  <pre class="lang-py prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;img src="&lt;correct path to project&gt;/media/images/photo_1.JPG" /&gt;
  
      {% for img in images %}
      &lt;img src="{{ media_root }}{{ img.image.name }}" /&gt;
      &lt;img src="{{ media_url }}{{ img.image.name }}" /&gt;
      &lt;img src="{{ img.image.url }}" /&gt;
      {% endfor %}
  &lt;/html&gt;
  </code></pre>
  
  <p>I get the broken icon for each one.<br>
  The browser source code shows me:</p>
  
  <pre class="lang-py prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;img src="&lt;correct path to project&gt;/media/images/photo_1.JPG" /&gt;    
      &lt;img src="&lt;correct path to project&gt;/media/images/photo_1.JPG" /&gt;    
      &lt;img src="http://127.0.0.1:8000/media/images/photo_1.JPG" /&gt;
      &lt;img src="http://127.0.0.1:8000/media/images/photo_1.JPG" /&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>that makes sense, I only have one photo uploaded.<br>
  and if I copy one of the hard links and put it into some other html file ...it works</p>