python - Navbar image not loading in production environment

Question

I am building a website with Django and bootstrap. I added an image to my navbar which is in a 'base.html' which I use as a template for my other html files. The image loads in development but doesn't appear in production. I'm using Heroku to host and deploy my app and google drive storage as my backend file storage for user uploaded-files. The navbar also uses another static file with the resume button and it works fine.

base.html header

<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container py-2">

            <a class="navbar-brand" href="{% url 'homepage' %}">
                <span class="d-flex align-items-center">
                    <img class="mx-3" src="{% static 'logo (200px).png' %}" width='70' alt="">
                    <h4> MAVERON AGUARES </h4>
                </span>
            </a>


            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- 
            target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
            aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                    <h5>
                        <a class="nav-link " aria-current="page" href="{% static 'Sample Resume.pdf' 
                        %}">Resume</a>
                    </h5>
                    <h5>
                      <a class="nav-link " aria-current="page" href="{% url 'blogHomePage' 
                    %}">Blog</a>
                    </h5>
                 </div>
             </div>
         </div>
     </nav>
</header>

settings.py

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'personalportfolio/static/')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

GOOGLE_DRIVE_STORAGE_JSON_KEY_FILE = 'Mave-Aguares-Portfolio-55b70982536d.json'
GOOGLE_DRIVE_STORAGE_MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', projects.views.homepage, name='homepage'),
    path('projects/', include('projects.urls')),
    path('blog/', include('blog.urls')),
]

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Expected output1

Production output2 Any help would be appreciated!!

question from:https://stackoverflow.com/questions/65621690/navbar-image-not-loading-in-production-environment

Answer 1

Waitting for answers