NGINX not Serving Image Files Properly

Question

I have set up a django website that would be served by Nginx, everything was working perfectly not until images stopped showing recently.

I tried inspecting the possible cause of this strange development using curl and then realized that the Content-Type is not recognized as Content-Type: image/jpeg returns a Content-Type: text/html; charset=utf-8

This behavior looks strange as I have included mime.types in my nginx.conf file. Below is an example response from curl command

user@server:~$ curl -I https://domain.name/media/upload/image.jpg
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Sun, 29 May 2022 00:45:53 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 11392
Connection: keep-alive
X-Frame-Options: DENY
Vary: Cookie
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin
Set-Cookie: csrftoken=T9Z3jrp4dzOAINxo6JzOUyjIGwGYHoc37TZaYsIOmHHyrQUw30vI6ETIAcy66Wnr; expires=Sun, 28 May 2023 00:45:53 GMT; Max-Age=31449600; Path=/; SameSite=Lax

Here is my full nginx.conf file

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}


#mail {
#   # See sample authentication script at:
#   # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#   # auth_http localhost/auth.php;
#   # pop3_capabilities "TOP" "USER";
#   # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#   server {
#       listen     localhost:110;
#       protocol   pop3;
#       proxy      on;
#   }
#
#   server {
#       listen     localhost:143;
#       protocol   imap;
#       proxy      on;
#   }
#}

Contents of /etc/nginx/sites-enabled/app

# /etc/nginx/sites-enabled

server {
    server_name my_server_IP my_server_NAME;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/user/app;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    listen 443 ssl; 
    ssl_certificate /path/to/certfullchain.pem; 
    ssl_certificate_key /path/to/certprivkey.pem; 
    include /etc/cert-provider/options-ssl-nginx.conf; 
    ssl_dhparam /etc/cerrt-provider/ssl-dhparams.pem; 






}

server {
    if ($host = www.domain.name {
        return 301 https://$host$request_uri;
    } 


    if ($host = domain.name) {
        return 301 https://$host$request_uri;
    } 


    listen 80;
    server_name my_server_IP my_server_NAME;
    return 404; 




}

Note: I am serving this website with gunicorn

score 2 · Accepted Answer · answered May 30 '22 at 19:13

I was able to fix this problem by adding new location directive which matches my media files. In this case my files are uploaded to media

I fixed this by add the following to my server block

  location /media/ {
        root /home/user/app;
    }

Now my new /etc/nginx/sites-enabled/app looks like this.

# /etc/nginx/sites-enabled

server {
    server_name my_server_IP my_server_NAME;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/user/app;
    }
    location /media/ {
        root /home/user/app;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    listen 443 ssl; 
    ssl_certificate /path/to/certfullchain.pem; 
    ssl_certificate_key /path/to/certprivkey.pem; 
    include /etc/cert-provider/options-ssl-nginx.conf; 
    ssl_dhparam /etc/cerrt-provider/ssl-dhparams.pem; 






}

server {
    if ($host = www.domain.name {
        return 301 https://$host$request_uri;
    } 


    if ($host = domain.name) {
        return 301 https://$host$request_uri;
    } 


    listen 80;
    server_name my_server_IP my_server_NAME;
    return 404; 




}

NGINX not Serving Image Files Properly

1 Answers1