static files are not served

I’m running my project using Nginx and Gunicorn, I pulled changes and ran collectstatic command which resulted in having the static files in the root folder for the static files, the problem is like I have a picture ‘img.jpg’ Nginx is trying to access ‘img.jpg/index.html’
I got this information from
/var/log/nginx/error.log

my Nginx configuration are:

location /static/ {
      alias /path/to/staticfiles/;
}

static files configuration

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

when I try to access the saticfiles in my website they are accessible through this path
www.domain.com/static/path/to/img.jpg

they are not accessible through this path
www.domain.com/staticfiles/path/to/img.jpg

This all looks right from what you’ve posted so far.

www.domain.com/static/path/file would be correct based upon your STATIC_URL setting and with your nginx location directive. The urls with .../staticfiles/... would not be valid.

If you have a page that is incorrectly referencing a file, we’d need to see the template involved.

Side note: As a general rule, you want to get your STATIC_ROOT moved to a directory outside your project - someplace that is more “nginx-friendly”, such as /var/www/html. (You can make it work the way you have it, but you typically end up granting more permissions to nginx than what would be considered “best practice”.)

1 Like

1- why you concluded that …/staticfiles/… should not work?
2- I will move the folder to a more friendly location
3- below the template

{% extends 'en/base.html' %}
{% load static %}
{% block extra_links %}
    <link rel="stylesheet" href={% static "css/gallery.css" %}>
{% endblock %}
{% block content %}

    <div class="gallery">
        <div class="gallery__strip__wrapper">
            <div class="gallery__strip one">
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/1.jpg" %}/>
                    </div>
                </div>
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/2.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/3.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/4.jpg" %}/>
                    </div>

                </div>
            </div>
        </div>
        <div class="gallery__strip__wrapper">
            <div class="gallery__strip two">
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/5.JPG" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/6.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/7.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/8.jpg" %}/>
                    </div>

                </div>
            </div>
        </div>
        <div class="gallery__strip__wrapper">
            <div class="gallery__strip three">
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/9.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/10.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/11.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/12.jpg" %}/>
                    </div>

                </div>
            </div>
        </div>
        <div class="gallery__strip__wrapper">
            <div class="gallery__strip four">
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/13.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/14.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img src={% static "images/gallery/15.jpg" %}/>
                    </div>

                </div>
                <div class="photo">
                    <div class="photo__image"><img  src={% static "images/gallery/16.jpg" %}/>
                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

Because you haven’t shown an nginx <alias or <location directive with /staticfiles/ in the url.

If it’s appending index.html to the requesting url, then that means you have something else wrong in the nginx configuration. We’d need to see your complete configuration for this project.

location /static/ {
      alias /path/to/staticfiles/;
}

I think this telling Nginx that when it receives this call it should goes to the staticfiles folder that I have created.

are you telling me that I should have

location /staticfiles/ {
      alias /path/to/staticfiles/;
}

More accurately, when it receives a request for a url starting with /static/, that the files should be retrieved from the /path/to/staticfiles/ directory. But the url is /static/, not /staticfiles/.

Absolutely not. You have:

which means that Django will create the urls for the static files using static/. You are not generating any urls starting with staticfiles.

I thought that we redirect the requests of .../static/... to the staticfiles, and it seems that my idea is not right!!

The problem was a TYPO I made in the template with src and href within the img tag
they should be

<div class="photo__image"><img src="{% static "images/gallery/15.jpg" %}"/>

instead I had

<div class="photo__image"><img src={% static "images/gallery/15.jpg" %}/>

Thanks @KenWhitesell for your help you always help me look at things differently.

Side note - Using the single backtick - ` only works for text all on one line.

When you want to mark multiple lines, use three backticks - ```, with the three backticks on lines by themselves. (I took the liberty of correcting your post for this.)