Django image cannot load correctly even though I added static root

February 15, 2022

settings.py

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

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'

urls.py

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('food/',include('foodApp.urls')),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

HTML Template

<a class="navbar-brand" href="">
        <img src="{% static 'delivery.png' %}">
      </a>

Folder Directory

food_delivery (Main Project)
-- food_delivery
-- foodApp
-- static (folder that puts images)
-- templates
-- manage.py

For loading images in Django, the HTML template could not correctly recognize the image that I am trying to indicate. I have a confusion where should I put the static folder in my project directory and I am not sure anything I am missing in the settings.py file in order to recognize the images inside the static folder directory. Can anyone can help me find out the solution in order to load images that are put under the static folder directory?

>Solution :

You need to add the static configuration on top of the media configuration:

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

Note the if settings.DEBUG is not required as such as the static function does check if the app is in debug mode. I just have it there as a reminder.

Of course, if you’re not using MEDIA_ROOT just remove it.