Django not loading image files with static

I have been working with Django and it isn't loading any image files but it is loading my CSS files in the same directory area.

HTML page

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{% static 'home.css' %}" type="text/css" rel="stylesheet">
    <title>Hello World</title>
</head>
<body>``
    <h1>Home</h1>
    <img href="{% static 'icons/folder.png' %}" alt="folder">
    {% for file in files %}
        {% if file.1 == True %}
            <p><a href="/files/home/{{file.2}}">{{file}}></a></p>
        {% else %}
            <p>{{file}}</p>
        {% endif %}
    {% endfor %}
</body>
</html>

settings.py

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

This is the dictory. The CSS file loads but the image doesn't
enter image description here

Let me know if you need any more information that I forgot to provide.

You need to use the src attribute for the img tag instead of href. The src attribute is required when using the img tag. Your code should look like this:

<img src="{% static 'icons/folder.png' %}" alt="folder">

However if you want to create a clickable image, you can wrap the <img> tag inside an <a> tag with the href attribute:

<a href="URL">
    <img src="path/to/image.jpg" alt="Clickable Image">
</a>

See https://www.geeksforgeeks.org/how-to-turn-an-image-into-a-link-in-html/.

Remember to run:

python manage.py collectstatic
Вернуться на верх