Django not loading image files with static

Question

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

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

Uchenna Adubasim · Accepted Answer · 2025-02-04 16:02:21Z

1

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

edited Feb 4 at 16:02

answered Feb 4 at 15:53

Uchenna Adubasim

5,4587 gold badges16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django not loading image files with static

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related