no able to load image on template using static

Using Django Templates & Frontend
1

Hi team,

I need some help to figure it out what I am doing wrong.
I am creating a template for login that is almost done, now I want to add a image on the upper right corner.
I am using

{% load static %}

sentences to load the css file located on the static files, and it is working perfectly.
But when I tried to load the image using the tag img it is not working

img src=“static/img/RenaultYP.png” alt=“logo”
I also tried but not works it did not show the image just the logo word
img src=“memberts/static/img/RenaultYP.png” alt=“logo”

see html code below and the image about my folders and how it looks

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'login.css' %}">
    <title>Signin</title>
</head>

<header>
    <div>
        <img src="static/img/RenaultYP.png" alt="logo">
    </div>
</header>

<body class="main-bg">
    <div class="login-container text-c animated flipInX">
            <div>
                <h1 class="logo-badge text-whitesmoke"><span class="fa fa-user-circle"></span></h1>
            </div>
                <h3>Renault do Brasil / CAS / Platec</h3>  <!--class="text-whitesmoke"-->
                <p class="signin">Sign in</p>

            <div class="container-content">
                <form class="margin-t">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Username" required="">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="*****" required="">
                    </div>
                    <button type="submit" class="form-button button-l margin-b">Sign In</button>
    
                    <a class="text-darkyellow" href="#"><small>Forgot your password?</small></a>
                    <!--<p class="text-whitesmoke text-center"><small>Do not have an account?</small></p>
                    <a class="text-darkyellow" href="#"><small>Sign Up</small></a> -->
                </form>

                <p class="margin-t text-whitesmoke"><small> Renault Brasil &copy; 2024</small> </p>
            </div>
        </div>
</body>

</html>

image
image1058×470 35.8 KB

image
image854×339 11 KB

2

What are the values of the following in your project/settings.py:

STATIC_URL
STATIC_ROOT
STATICFILES_DIRS
3

Instead of this:

You should be using the static tag:

 <img src="{% static 'img/RenaultYP.png' %}" alt="logo">
1 Like
4

Hi @onyeibo

see bellow:

STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'productionfiles'


#Add this in your settings.py file for global statics files:
STATICFILES_DIRS = [
    BASE_DIR / 'mystaticfiles'
]
5

Thank you @philgyford it worked.
I really appreciate it.

1 Like