Django ImageField link to wrong directory

Question

My Django admin page is saving images to the right directory (.../project/media/article/), but when I use Article.image.url to reference that in a template the url then points to http://localhost/article/image.jpg rather than http:// localhost/media/article/cat.jpg

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.

Thanks in advance

This is my poject urls file:

urlpatterns = patterns('',  
url(r'^admin/', include(admin.site.urls)),
...
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': MEDIA_ROOT}),
)

And here is the relevant settings info:

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 = '/'

And relevant model info:

class Article(models.Model):
    image = models.ImageField(upload_to = 'article/', blank=True)
    image_caption = models.CharField(max_length=100, blank=True)

UPDATE: Here is the relevant template html:

{% if article %}
            <!-- Large/Medium (big desktops) -->
            <li class='list-group-item hidden-xs hidden-sm fourColumns'>
                <div class='panel'>
                    <div class='panel-heading'>
                        {{ article.pub_date }}
                    </div>
                    <div class='panel-body'>
                        By {{ article.writer }}
                    </div>
                </div>
                {% if article.pull_quote and not article.image %}
                    {{ article.article|truncwords:'50'|linebreaks }}
                    <blockquote>
                        <p>
                            {{ article.pull_quote }}
                        </p>
                    </blockquote>
                    {{ article.article|truncfrom:'50'|linebreaks }}
                {% elif article.image and article.image_caption and not article.pull_quote %}
                    {{ article.article|truncwords:'50'|linebreaks }}
                    <img src='{{ article.image.url }}' class='img-responsive'/>
                    <em>{{ article.image_caption }}</em><br/><br/>
                    {{ article.article|truncfrom:'50'|linebreaks}}
                {% elif article.image and not article.image_caption and not article.pull_quote %}
                    {{ article.article|truncwords:'50'|linebreaks}}
                    <img src='{{ article.image.url }}' class='img-responsive'/>
                    {{ article.article|truncfrom:50|linebreaks }}
                {% elif article.image and article.image_caption and article.pull_quote %}
                    {{ article.article|truncwords:'50'|linebreaks }}
                    <blockquote>
                        <p>
                            {{ article.pull_quote }}
                        </p>
                    </blockquote>
                    {{ article.article|truncfromto:'50,100'|linebreaks }}
                    <img src='{{ article.image.url }}' class='img-responsive'/>
                    <em>{{ article.image_caption }}</em><br/><br/>
                    {{ article.article|truncfrom:'100'|linebreaks}}
                {% elif article.image and article.pull_quote and not article.image_caption %}
                    {{ article.article|truncwords:'50'|linebreaks }}
                    <blockquote>
                        <p>
                            {{ article.pull_quote }}
                        </p>
                    </blockquote>
                    {{ article.article|truncfromto:'50,100'|linebreaks }}
                    <img src='{{ article.image.url }}' class='img-responsive'/>
                    {{ article.article|truncfrom:'100' }}
                {% else %}
                    {{ article.article|linebreaks }}
                {% endif %}
            </li>
        {% endif %}

Answer 1

Try changing:

MEDIA_URL = '/'

to:

MEDIA_URL = '/media/'

And try also changing:

 <img src='{{ article.image.url }}' 

to:

 <img src="{{ MEDIA_URL }}{{ article.image }}" >