CODEWITHSUNDEEP
pythondjango
vkryuu
vkryuu

Reputation: 119

Image broken HTML even with correct path

So in my navigation bar I have tried to add an icon. However, even with the correct path given (shown with fuji.png) the image gives a 404 (NOT FOUND).

The error message in inspect element is:

GET http://127.0.0.1:8000/icons/fuji.png 404 (Not Found)

Does this mean that instead of a relative path it looks for a URL path?

navbar.html

<div class="topnav">
    <nav>

        <div class="logo-image">
            <img src="/icons/fuji.png" alt="Mt. Fuji"/>
        </div>

        {% with url_name=request.resolver_match.url_name %}
        <a class="{% if url_name == 'index' %}wob{% endif %}" href="{% url 'polls:index' %}">Homepage</a>
        <a class="{% if url_name == 'create' %}wob{% endif %}" href="{% url 'polls:create' %}">Create a Poll</a>
        {% endwith %}
    </nav>
</div>

*BY THE WAY:: I get the same response with /icons/fuji.pg and icons/fuji.png.

This is my directory (not everything, only showing what is necessary):

File directory

Does anyone have an idea of why this is happening and how to fix this? The image doesn't even load in -- it is just a broken image file.

Upvotes: 1

Views: 585

Answers (1)

sortas
sortas

Reputation: 1673

You need to set up a folder for static files in settings (like STATIC_URL = '/static/'), before trying to load them. Then, you can create icon folder there and use links to access the images there. The full guide is here.

Upvotes: 1

Related Questions