title: Django Display ImageField With Media Dir
body: <p>I am using Django 1.9.3. I am trying to display media files uploaded by say a user (e.g. imageFields).</p>
  
  <p>HTML Page:</p>
  
  <pre><code>    {% for project in projects %}
          &lt;img src="{{ project.image.url }}" class="img-responsive" alt=""&gt;
      {% endfor %}
  </code></pre>
  
  <p>Views.py:</p>
  
  <pre><code>def home(request):
      projects = AvailableProject.objects.all().order_by('-published_date')
  
      return render(request, 'accounts/home.html', {'projects': projects})
  </code></pre>
  
  <p>urls.py:</p>
  
  <pre><code>urlpatterns = [
  ...
  ] 
  urlpatterns += staticfiles_urlpatterns()
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  
  <p>settings.py:</p>
  
  <pre><code>STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'static')
  
  STATICFILES_DIRS = (
      ('global', os.path.join(BASE_DIR, 'smilesite', 'project_static')),
      ('admins', os.path.join(BASE_DIR, 'admins', 'static')),
      ('accounts', os.path.join(BASE_DIR, 'accounts', 'static')),
      ('mysite', os.path.join(BASE_DIR, 'mysite', 'static')),
      ('media', os.path.join(BASE_DIR, 'media')),
  )
  # print(STATICFILES_DIRS)
  STATICFILES_FINDERS = (
      'django.contrib.staticfiles.finders.FileSystemFinder',
  )
  
  # Define place to save media (e.g. pictures for all the projects)
  PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
  MEDIA_ROOT = os.path.join(PROJECT_PATH, 'media')
  MEDIA_URL = '/media/'
  </code></pre>
  
  <p>models.py:</p>
  
  <pre><code>from django.db import models
  from django.conf import settings
  
  # Create your models here.
  class AvailableProject(models.Model):
      image = models.ImageField(upload_to=settings.MEDIA_ROOT) 
  </code></pre>
  
  <p>I have literally went through every single stack over flow page on this and tried the following solutions, but still has not worked...:</p>
  
  <pre><code>&lt;img src="{% static 'media/{{project.image.title}}.jpg' %}" class="img-responsive" alt=""&gt;
  &lt;img src="{{ project.image.url }}" class="img-responsive" alt=""&gt;
  </code></pre>
  
  <p>I don't know why the project.image.url is not showing the corresponding image correctly.</p>