title: Django ImageField link to wrong directory
body: <p>My Django admin page is saving images to the right directory (.../project/media/article/), but when I use <strong>Article.image.url</strong> to reference that in a template the url then points to http://<strong>localhost</strong>/article/image.jpg rather than http://
  <strong>localhost</strong>/media/article/cat.jpg</p>
  
  <p>I've spent probably a good 4 hours trying to fix this with no avail. What am I doing wrong? The template renders perfectly with just a default 'image missing'/'broken link' icon where the image should be.</p>
  
  <p>Thanks in advance</p>
  
  <p>This is my poject urls file:</p>
  
  <pre><code>urlpatterns = patterns('',  
  url(r'^admin/', include(admin.site.urls)),
  ...
  (r'^site_media/(?P&lt;path&gt;.*)$', 'django.views.static.serve', {'document_root': MEDIA_ROOT}),
  )
  </code></pre>
  
  <p>And here is the relevant settings info:</p>
  
  <pre><code>STATIC_ROOT = os.path.join(os.path.dirname(os.path.dirname(__file__)),'app','static')
  STATIC_URL = '/app/static/'
  MEDIA_ROOT = os.path.join(os.path.dirname(os.path.dirname(__file__)),'media')
  MEDIA_URL = '/'
  </code></pre>
  
  <p>And relevant model info:</p>
  
  <pre><code>class Article(models.Model):
      image = models.ImageField(upload_to = 'article/', blank=True)
      image_caption = models.CharField(max_length=100, blank=True)
  </code></pre>
  
  <p>UPDATE: Here is the relevant template html:</p>
  
  <pre><code>{% if article %}
              &lt;!-- Large/Medium (big desktops) --&gt;
              &lt;li class='list-group-item hidden-xs hidden-sm fourColumns'&gt;
                  &lt;div class='panel'&gt;
                      &lt;div class='panel-heading'&gt;
                          {{ article.pub_date }}
                      &lt;/div&gt;
                      &lt;div class='panel-body'&gt;
                          By {{ article.writer }}
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% if article.pull_quote and not article.image %}
                      {{ article.article|truncwords:'50'|linebreaks }}
                      &lt;blockquote&gt;
                          &lt;p&gt;
                              {{ article.pull_quote }}
                          &lt;/p&gt;
                      &lt;/blockquote&gt;
                      {{ article.article|truncfrom:'50'|linebreaks }}
                  {% elif article.image and article.image_caption and not article.pull_quote %}
                      {{ article.article|truncwords:'50'|linebreaks }}
                      &lt;img src='{{ article.image.url }}' class='img-responsive'/&gt;
                      &lt;em&gt;{{ article.image_caption }}&lt;/em&gt;&lt;br/&gt;&lt;br/&gt;
                      {{ article.article|truncfrom:'50'|linebreaks}}
                  {% elif article.image and not article.image_caption and not article.pull_quote %}
                      {{ article.article|truncwords:'50'|linebreaks}}
                      &lt;img src='{{ article.image.url }}' class='img-responsive'/&gt;
                      {{ article.article|truncfrom:50|linebreaks }}
                  {% elif article.image and article.image_caption and article.pull_quote %}
                      {{ article.article|truncwords:'50'|linebreaks }}
                      &lt;blockquote&gt;
                          &lt;p&gt;
                              {{ article.pull_quote }}
                          &lt;/p&gt;
                      &lt;/blockquote&gt;
                      {{ article.article|truncfromto:'50,100'|linebreaks }}
                      &lt;img src='{{ article.image.url }}' class='img-responsive'/&gt;
                      &lt;em&gt;{{ article.image_caption }}&lt;/em&gt;&lt;br/&gt;&lt;br/&gt;
                      {{ article.article|truncfrom:'100'|linebreaks}}
                  {% elif article.image and article.pull_quote and not article.image_caption %}
                      {{ article.article|truncwords:'50'|linebreaks }}
                      &lt;blockquote&gt;
                          &lt;p&gt;
                              {{ article.pull_quote }}
                          &lt;/p&gt;
                      &lt;/blockquote&gt;
                      {{ article.article|truncfromto:'50,100'|linebreaks }}
                      &lt;img src='{{ article.image.url }}' class='img-responsive'/&gt;
                      {{ article.article|truncfrom:'100' }}
                  {% else %}
                      {{ article.article|linebreaks }}
                  {% endif %}
              &lt;/li&gt;
          {% endif %}
  </code></pre>