pythonhtmldjangoimagedjango-templates

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.

Solution

  • 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