title: Django images uploaded by admin will not display in production or development
body: <p>I have Django 1.10 and whitenoise 3.3 and the website is deployed on Heroku. My static files are fine in development and production. My media files, however do not load in production and development. </p>
  
  <p>When debug = True, the media files render properly in both production and development. What I really want is for the media files to render properly even when debug = False. </p>
  
  <p>Everything was fine and dandy until I realized I deployed my site with debug = True. So, I changed it to debug = False. Now the static and media files failed. I did some research and went to whitenoise docs to follow setup. Then the static files worked. However, the media files still failed. I read the docs on media and static files on Django, but unfortunately only saw some samples with nginx and the doc says there are many ways to do this and can only provide structure. </p>
  
  <p>I am seeking a solution that will allow me to continue to add things to my site in production via admin and still allow my to run my website with heroku. </p>
  
  <p>settings.py</p>
  
  <pre><code>BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  
  INSTALLED_APPS = [
  'polls.apps.PollsConfig',
  'blog.apps.BlogConfig',
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'whitenoise.runserver_nostatic',
  
  #'storages',
  ]
  
  
  MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',
  'django.contrib.sessions.middleware.SessionMiddleware',
  'django.middleware.common.CommonMiddleware',
  'django.middleware.csrf.CsrfViewMiddleware',
  'django.contrib.auth.middleware.AuthenticationMiddleware',
  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
  
  'whitenoise.middleware.WhiteNoiseMiddleware',
  ]
  
  ROOT_URLCONF = 'mysite.urls'
  
   TEMPLATES = [
  {
      'BACKEND': 'django.template.backends.django.DjangoTemplates',
      'DIRS': [],
      'APP_DIRS': True,
      'OPTIONS': {
          'context_processors': [
              'django.template.context_processors.debug',
              'django.template.context_processors.request',
              'django.contrib.auth.context_processors.auth',
              'django.contrib.messages.context_processors.messages',
          ],
      },
  },
  ]
  
  WSGI_APPLICATION = 'mysite.wsgi.application'
  
  
  # Database
  # https://docs.djangoproject.com/en/1.11/ref/settings/#databases
  
  DATABASES = {
  'default': {
      'ENGINE': 'django.db.backends.sqlite3',
      'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
  }
  }
  
  STATIC_URL = '/static/'
  #STATIC_URL = '/site_media/'
  #STATICFILES_DIRS = [
  #    os.path.join(BASE_DIR, 'mysite/static'),
  #]
  
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  #STATIC_ROOT = ''
  
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  
  MEDIA_URL = '/media/'
  
  STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
  </code></pre>
  
  <p>models.py</p>
  
  <pre><code>from django.db import models
  
  class Post(models.Model):
      pub_date = models.DateTimeField('date published')
      title = models.CharField(max_length=200)
      thumbnail = models.ImageField(upload_to='static')
      def __str__(self):
          return self.title
  
  class Image(models.Model):
      image = models.ImageField(max_length=100, upload_to='static')
      pub_date = models.DateTimeField('date_published')
      post = models.ForeignKey('Post', default=0, on_delete=models.CASCADE,)
      title = models.CharField(max_length=200)
  
      def __str__(self):
          return self.title
  
  class Text(models.Model):
      text = models.TextField()
      pub_date = models.DateTimeField('date_published')
      post = models.ForeignKey('Post', default=0, on_delete=models.CASCADE,)
      title = models.CharField(max_length=200)
  
      def __str__(self):
          return self.title
  </code></pre>
  
  <p>here are the html files inside blog/templates/blog/</p>
  
  <p>about.html </p>
  
  <pre><code>{% load static %}
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; and1can's Blog &lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="{% static     'blog/about.css' %}"/&gt; 
           &lt;link rel="stylesheet"     href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
           &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Josefin+Slab" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class='header'&gt;
              &lt;a class='title' href="/"&gt; &lt;h1 class='title'&gt; and1can &lt;/h1&gt;&lt;/a&gt;
          &lt;/div&gt;
  
  
              &lt;h3 class='intro'&gt; Machine Learning, Statistics, and all that other fun stuff &lt;/h3&gt;
  
              &lt;div class='about_title'&gt; 
                  Andy Chu 
              &lt;/div&gt;
  
  
          &lt;/div&gt;
  
          &lt;/br&gt;
  
  
  
          &lt;/br&gt;
          &lt;/br&gt;
          &lt;/br&gt;
  
      &lt;div class="wrapper"&gt;
          &lt;div class="line"&gt;&lt;hr width="90%"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/br&gt;
  
      &lt;div class='blurb'&gt;
          I am interested in what we are able to learn from data. I am looking to join a data science team that shares this interest and satisfaction gained when making predictions that would otherwise not be possible without analyzing data. Statistics, machine learning, artificial intelligence, computer vision, and computational geometry are my fields of interest.
      &lt;/div&gt;
  
      &lt;/br&gt;
  
  
      &lt;div class="container"&gt;
          &lt;div class='email'&gt;
              Contact: &lt;/br&gt;
               &lt;/br&gt;
          &lt;/div&gt;
  
  
  
          &lt;a href="https://linkedin.com/in/andy-chu-76456a32"&gt; 
              &lt;img src="/media/static/linkedin.png" height=40; width=40;/&gt;
           &lt;/a&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;
  
          &lt;a href="https://github.com/and1can"&gt;
                  &lt;img src="/media/static/github.png" height=40; width=40/&gt;
          &lt;/a&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;
          &lt;a href="https://www.kaggle.com/and1can"&gt;
              &lt;img src="/media/static/kaggle.png" height=40; width=60/&gt;
          &lt;/a&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.html </p>
  
  <pre><code> {% load static %}
  
  
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt; and1can's Blog &lt;/title&gt;
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Josefin+Slab" /&gt;
          &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;h1 class='title'&gt; and1can &lt;/h1&gt;
          &lt;h3 class='intro'&gt; Machine Learning, Statistics, and all that other fun stuff &lt;/h3&gt;
          &lt;a class='about' href="/blog/about"&gt; &lt;h1 class='title'&gt; about &lt;/h1&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;div class="line"&gt;&lt;hr width="90%"&gt;&lt;/div&gt;
  
  
      &lt;/br&gt;
      &lt;/br&gt;
      &lt;/br&gt;
      &lt;ul&gt;
          {% for p in latest_posts %}
          &lt;/br&gt;
              &lt;div class="header"&gt;
                  &lt;a href="/blog/{{ p.id }}"&gt;
                      {{ p.title }}
  
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class='intro'&gt;
                  {{ p.pub_date}}
              &lt;/div&gt;
              &lt;/br&gt;
              &lt;/br&gt;
                  &lt;a href="/blog/{{ p.id }}"&gt;
                      &lt;img class="image" src="{{ p.thumbnail.url }}" height=400 width=400/&gt;
                  &lt;/a&gt;
          &lt;/br&gt;
          &lt;/br&gt;
          &lt;/br&gt;
          &lt;/br&gt;
          &lt;/br&gt;
          {% endfor %}
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>post.html </p>
  
  <pre><code>{% load static %}
  
  
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt; and1can's Blog &lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="{% static 'blog/post.css' %}"/&gt; 
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Josefin+Slab" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class='header'&gt;
          &lt;a class='title' href="/"&gt; &lt;h1 class='title'&gt; and1can &lt;/h1&gt;&lt;/a&gt;
  
      &lt;h3 class='intro'&gt; Machine Learning, Statistics, and all that other fun stuff &lt;/h3&gt;
  
  
          &lt;a class='about' href="/blog/about"&gt; &lt;h1 class='title'&gt; about &lt;/h1&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  
  
  
  
  
      &lt;/br&gt;
      &lt;/br&gt;
      &lt;/br&gt;
  
      &lt;div class="wrapper"&gt;
  
          &lt;div class="line"&gt;&lt;hr width="93%"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/br&gt;
      &lt;/br&gt;
  
      &lt;/div&gt;
  
      &lt;div class='post'&gt;
  
          &lt;div class='post_intro'&gt;
              {{ post.pub_date }}
          &lt;/div&gt;
      &lt;/div&gt;
  
  
          &lt;div class='post_title'&gt;
              {{ post.title }}
          &lt;/div&gt;
  
  
  
          &lt;/br&gt;
  
  
  
          &lt;/br&gt; 
          &lt;img class="image" src="{{ post.thumbnail.url }}" width=300, height=300/&gt;
  
  
      &lt;ul class='content'&gt;
          {% for o in output %}
          &lt;/br&gt;
              {% if o.image %}
  
                      {% block content %}
                          &lt;img class="image" src="{{ o.image.url }}" /&gt;
                      {% endblock %}
  
              {% else %}
                  &lt;div class="text"&gt;
                  {{o.text}}
                  &lt;/div&gt;
              {% endif %}
          &lt;/br&gt;
          {% endfor %}
      &lt;/ul&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>