title: Image paths in Django view are relative to directory instead of MEDIA_URL
body: <p>I've been struggling with this problem for a few days and unable to solve it on my own. I am working on a blog site. The post view is rendered at a <strong>URL</strong> such as this:</p>
  
  <pre><code>domain.com/blog/specificpost/
  </code></pre>
  
  <p>I have an <strong>ImageField</strong> in my model. The images upload properly and I can address the images at the correct URLs.</p>
  
  <pre><code>domain.com/media/asset.jpg
  </code></pre>
  
  <p>In my <strong>settings.py</strong> I have defined the media paths. When I access the image files from the Admin, they work properly.</p>
  
  <pre><code>MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  MEDIA_URL = '/media/'
  </code></pre>
  
  <p>When rendering the view of the post, the image path is rendered incorrectly in the DOM. It is:</p>
  
  <pre><code>domain.com/blog/media/asset.jpg
  </code></pre>
  
  <p>It should be:</p>
  
  <pre><code>domain.com/media/asset.jpg
  </code></pre>
  
  <p>In my <strong>urlpattern</strong> I have appended:</p>
  
  <pre><code>+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  
  <p>and added the relevant imports to urls.py. I believe this code is supposed to serve the files at the domain root during <a href="https://docs.djangoproject.com/en/1.11/howto/static-files/#serving-files-uploaded-by-a-user-during-development" rel="nofollow noreferrer">development</a>.</p>
  
  <p>I have tried all the solutions <a href="https://stackoverflow.com/questions/5517950/django-media-url-and-media-root">here</a>, but the image URLs still render relative to the directory. Any help to set me on the correct path would be useful, thank you very much.</p>
  
  <p>Post template:</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block journal_entry %}
      &lt;main class="content"&gt;
          &lt;section class="photo"&gt;
              &lt;img src="{{ object.image }}"&gt;
          &lt;/section&gt;
          &lt;section class="entry"&gt;
              &lt;section class="entry-content"&gt;
                  {{ object.body|linebreaks }}
              &lt;/section&gt;
              &lt;section class="entry-meta"&gt;
                  {{ object.created }}&lt;span class="user-options"&gt; • &lt;a href="#"&gt;Delete&lt;/a&gt;&lt;/span&gt;
              &lt;/section&gt;
          &lt;/section&gt;
      &lt;/main&gt;
  {% endblock %}
  </code></pre>