title: Django - How can I load images created by site using image uploaded by users?
body: <p>For any image uploaded by the user, I am generating a Thumbnail. The user uploaded image and thumbnail are stored like this.</p>
  
  <pre><code> media_cdn (folder)
    -user_name_1 (folder)
    -user_name_2 (folder)
    --post_1_title_slug (folder)
    ---300x180 (folder)
    ----300x180_user_uploaded_image_1.png
    ---user_uploaded_image_1.png
    --post_2_title_slug (folder)
    -user_name_3 (folder)
  </code></pre>
  
  <p>Since I am using ImageField in models, I can easily use <code>{{ appname.image.url }}</code> in templates, but this will load the image uploaded. I want to load the thumbnail.</p>
  
  <p>I search on stackoverflow and most people are saying to use <code>{{ MEDIA_URL }}</code>, like <a href="https://stackoverflow.com/questions/10776969/images-from-media-file-wont-get-displayed-in-django-template">here</a></p>
  
  <p>I am leaning towards <code>{{ MEDIA_URL }}</code> because, in the future, the website will be generating more images based on the same user uploaded images.</p>
  
  <p>I am using this as of now, </p>
  
  <pre><code>&lt;img src='{{ MEDIA_URL }}/{{user.username}}/{{ upload.slug }}/300x180/300x180_{{ upload.get_filename }}'&gt;
  </code></pre>
  
  <p>this is giving out this in the page, (from Inspect element)</p>
  
  <pre><code>/user_name/file_slug/300x180/300x180_image_name.png
  </code></pre>
  
  <p><code>{{ MEDIA_URL }}</code> is not giving its correct url.</p>
  
  <p>FYI,</p>
  
  <p><code>get_filename</code> is from models.py where I wrote this to get the file name</p>
  
  <pre><code>    def get_filename(self):
          return(os.path.basename(self.image.name))
  </code></pre>
  
  <p>how can I make this work?
  I am Using <code>Django 1.11.5</code>, and <code>Pillow 4.2.1</code></p>