title: Heroku Django Images not loading
body: <p>Been trying to fix this a few hours, can't seem to wrap my head around it. I have whitenoise installed and the website works fine besides the images not loading. Here are my media codes:</p>
  
  <p>├───.idea</p>
  
  <p>├───analyst</p>
  
  <p>│ └───<strong>pycache</strong></p>
  
  <p>├───blog</p>
  
  <p>│ ├───migrations</p>
  
  <p>│ │ └───<strong>pycache</strong></p>
  
  <p>│ ├───static</p>
  
  <p>│ │ ├───blog</p>
  
  <p>│ │ └───images</p>
  
  <p>│ ├───templates</p>
  
  <p>│ │ └───blog</p>
  
  <p>│ └───<strong>pycache</strong></p>
  
  <p>└───media</p>
  
  <p>└───article_pics</p>
  
  <pre><code>STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  STATIC_URL = '/static/'
  
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  MEDIA_URL = '/media/'
  </code></pre>
  
  <p>MAIN URLS:</p>
  
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('', include('blog.urls'))
  ]
  
  if settings.DEBUG:
      urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  
  <p>Home Template:</p>
  
  <pre><code>{% extends "blog/base.html" %}
  {% load static %}
  {% load crispy_forms_tags %}
  
  {%block content%}
  &lt;!-- Images Section --&gt;
  
  &lt;div class="swiper-container" style="height:520px;"&gt;
          &lt;div class="swiper-wrapper"&gt;
  
              &lt;section class="swiper-slide about two"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="title title-dark"&gt;
                          &lt;h2 class="title-heading"&gt;Analyze Everything&lt;/h2&gt;
                          &lt;img class="about-profile" src="{%static 'images/think.png'%}" alt=""&gt;
                          &lt;p class="price"&gt;&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="cta"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
  
              &lt;section class="swiper-slide about two"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="title title-dark"&gt;
                          &lt;h2 class="title-heading"&gt;Free Subscription&lt;/h2&gt;
                          &lt;h3 class="title-sub-heading"&gt;Read. Analyze. Learn.&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="cta"&gt;
                          &lt;a href="#newsletter" class="btn btn-danger"&gt;Subscribe&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
  
  
              &lt;/div&gt;
       &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
      &lt;!-- Add Arrows --&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  &lt;!-- End of Images Section --&gt;
  
  &lt;!-- Latest Articles --&gt;
  &lt;div class="container"&gt;
      &lt;hr&gt;&lt;br&gt;
      &lt;h1 class="text-center"&gt;Latest Articles&lt;/h1&gt;
      &lt;!-- Row One of Articles --&gt;
      &lt;div class="row"&gt;
          {%for articles in articles%}
            &lt;div class="col-md-4 pt-4"&gt;
              &lt;div class="card h-100"&gt;
                  &lt;img class="card-img-top" src="{{ articles.image.url }}" alt="Card image cap"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;a href="{% url 'article-detail' articles.id%}" class="article-title"&gt;{{articles.title}}&lt;/a&gt;
                      &lt;hr&gt;
                      &lt;p class="card-text"&gt;{{articles.content|safe|slice:":80"}}...&lt;/p&gt;
                      &lt;a class="btn btn-sm btn-outline-primary" href="{% url 'article-detail' articles.id%}"&gt;Read More...&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {%endfor%}
      &lt;/div&gt;
      &lt;!-- End of Row One of Articles --&gt;
  
  
      &lt;!-- Row Two of Articles --&gt;
      &lt;div class="row "&gt;
          {% for articles_two in articles_two %}
            &lt;div class="col-md-4 pt-4"&gt;
              &lt;div class="card h-100"&gt;
                  &lt;img class="card-img-top" src="{{ articles_two.image.url }}" alt="Card image cap"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;a href="{% url 'article-detail' articles_two.id%}" class="article-title"&gt;{{articles_two.title}}&lt;/a&gt;&lt;hr&gt;
                      &lt;p class="card-text"&gt;{{articles_two.content|safe|slice:":80"}}...&lt;/p&gt;
                      &lt;a class="btn btn-sm btn-outline-primary" href="{% url 'article-detail' articles_two.id%}"&gt;Read More...&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% endfor %}
      &lt;/div&gt;
      &lt;!-- End of Row Two of Articles --&gt;
  
      &lt;br&gt;
      &lt;a style="float:right;" href="{%url 'articles' %}" class="btn btn-warning"&gt; &lt;i class="fas fa-angle-double-right"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- End of Latest Articles --&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;hr&gt;
  
  &lt;section id="newsletter" class="newsletter"&gt;
      &lt;h1 class="text-center"&gt;Subscribe to The Analyst Now&lt;/h1&gt;
      &lt;p class="text-center mb-3" style="color: grey;"&gt;Subscribe For Automatic Updates.&lt;/p&gt;
      &lt;div class="text-center"&gt;
          &lt;form method="POST"&gt;
              {% csrf_token %}
              &lt;fieldset class="form-group"&gt;{{form.as_p}}
                  &lt;button class="btn btn-danger" type="submit"&gt;Subscribe&lt;/button&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;br&gt;
  &lt;/section&gt;
  
  
      &lt;!-- Javascript Tags --&gt;
      &lt;script src="{% static 'blog/swiper.min.js' %}"&gt;&lt;/script&gt;
      &lt;script&gt;
          var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: '1',
  
            autoplay: {
              delay: 3000,
              disableOnInteraction: false,
            },
  
            coverflowEffect: {
              stretch: 0,
              depth: 100,
              modifier: 1,
              slideShadows : true,
            },
  
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            pagination: {
              el: '.swiper-pagination',
            },
          });
        &lt;/script&gt;
  {%endblock%}
  </code></pre>