404 Not found error

[roaddust2]

I have a problem serving media files with webp tag. Just followed steps in documentation. Maybe I am missing something?

My settings:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATICFILES_DIRS = (
    ("css", os.path.join(STATIC_ROOT, 'css/')),
    ("images", os.path.join(STATIC_ROOT, 'images/')),
    ("js", os.path.join(STATIC_ROOT, 'js/'))
)

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

Template example:

{% load i18n webp %}
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">{% translate 'Categories' %}</h1>
<div class="row row-cols-2 row-cols-lg-4">
    {% for category in categories %}
    <div class="col mb-4 text-center">
        <a href="{{ category.get_absolute_url }}">
            <img src="{% webp category.image.url %}" class="card-img-top" alt="{% if category.image_alt %}{{ category.image_alt }}{% else %}{{ category.name }}{% endif %}">
        </a>
        
        <h2 class="card-text h4 mt-3">
            <a class="nav-link" href="{{ category.get_absolute_url }}">
                {{ category.name }}
            </a>
        </h2>
    </div>
    {% endfor %}
</div>

Output error:

[26/Aug/2023 11:43:23] "GET /static/media/images/categories/cat_totebag.jpg HTTP/1.1" 404 1876
[26/Aug/2023 11:43:23] "GET /static/media/images/categories/cat_rolltop.jpg HTTP/1.1" 404 1876
[26/Aug/2023 11:43:23] "GET /static/media/images/categories/cat_backpack.jpg HTTP/1.1" 404 1879
[26/Aug/2023 11:43:23] "GET /static/media/images/categories/cat_duffelbag.jpg HTTP/1.1" 404 1882

So "/static/" is added to the path, when correct path is /media/images/categories/img.jpg. With static tag media serving correctly and everything is fine

[andrefarzat]

Hello @roaddust2 I am not aware of this syntax for declaring STATICFILES_DIRS settings as tuples:

STATICFILES_DIRS = (
    ("css", os.path.join(STATIC_ROOT, 'css/')),
    ("images", os.path.join(STATIC_ROOT, 'images/')),
    ("js", os.path.join(STATIC_ROOT, 'js/'))
)

Shouldn't it be this:

STATICFILES_DIRS = [
    os.path.join(STATIC_ROOT, 'css/'),
    os.path.join(STATIC_ROOT, 'images/'),
    os.path.join(STATIC_ROOT, 'js/')
]

?

[roaddust2]

Thank you for the answer! Docs says Django allow you to declare STATICFILES_DIRS with prefixes as a tuples:

https://docs.djangoproject.com/en/4.2/ref/settings/#prefixes-optional

[roaddust2]

Well, I added media folder to static dirs, and now images are loading. But unfortunately they still .jpg 😅

STATICFILES_DIRS = [
    ("css", os.path.join(STATIC_ROOT, 'css/')),
    ("images", os.path.join(STATIC_ROOT, 'images/')),
    ("js", os.path.join(STATIC_ROOT, 'js/')),
    ("media", 'media/'),
]

P.S. But it is a bad practice to put media in static anyway