Search code examples
htmldjangodjango-tailwind

How do I access media folder in django + tailwind


I cant use images on my webpage from my media folder in my django project here is how my directory looks: here is how my directory looks:

here is my code:

{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
        {% tailwind_css %}
    </head>

    <body>
        <div class="w-full h-[100vh] flex justify-center items-center bg-BG">
            <div class="flex flex-col items-start gap-7 py-3 px-8 bg-darkBG rounded-[0.25rem]">
                <h1 class="text-white text-[1.5rem] font-rubik font-[400]">
                    Proceed with your <br><span class="font-[500]">LOGIN!</span>
                </h1>
                <img src="/media/login_img.png" alt="">
            </div>
        </div>
    </body>
</html>


this is my settings.py:

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / '../theme/static']

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'

Solution

  • add media urls to urls.py file:

    from django.conf.urls.static import static
    from django.conf import settings
    
    urlpatterns = [
     ....
    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)