Images not being served with Django/Nginx

Question

I can't seem to figure out why my images aren't being served when my other static files are.

I'm following along with this tutorial, and everything is working except for the images aren't being served. All other static files (css, js, etc.) are served however.

I've tried looking at the Django Docs, several SO posts, and the Nginx Docs.

After reading the above, I have tried moving the static files to different places and including STATICFILES_DIR. It looks like the static files are getting found and served by Nginx (except for the img dir). I can see the css and js files when I check Sources with Chrome Developer Tools, just not the img dir and files.

I really appreciate any help you all may have!

Settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SETTINGS_PATH = os.path.dirname(os.path.dirname(__file__))

# TEMPLATE_DIRS = (
#     os.path.join(SETTINGS_PATH, 'templates'),
# )


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '**'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['138.197.19.209']


# Application definition

INSTALLED_APPS = [
    'material',
    'material.frontend',
    'material.admin',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ihc',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'ihc_data.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'ihc_data.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.10/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': 'mydatabase',
    }
}

# Password validation
# https://docs.djangoproject.com/en/1.10/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.10/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


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

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '../static/')

Nginx Sites-Available

upstream app_server {
    server unix:/home/urban/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 80;

    # add here the ip address of your server
    # or a domain pointing to that ip (like example.com or www.example.com)
    server_name 138.197.19.209;

    keepalive_timeout 5;
    client_max_body_size 4G;

    access_log /home/urban/logs/nginx-access.log;
    error_log /home/urban/logs/nginx-error.log;

    location /static/ {
        alias /home/urban/static/;
    }

    # checks for static file, if not found proxy to app
    location / {
        try_files $uri @proxy_to_app;
    }

    location @proxy_to_app {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      proxy_pass http://app_server;
    }
}

Nginx Error Log (sample)

2016/12/10 17:41:52 [error] 12773#12773: *52 open() "/home/urban/static/img/projects.png" failed (2: No such file or directory), client: 24.11.95.201, server: 138.197.19.209, request: "GET /static/img/projects.png HTTP/1.1", host: "138.197.19.209", referrer: "http://138.197.19.209/vizes/Projects"
2016/12/10 17:41:55 [error] 12773#12773: *54 open() "/home/urban/static/img/savings.png" failed (2: No such file or directory), client: 24.11.95.201, server: 138.197.19.209, request: "GET /static/img/savings.png HTTP/1.1", host: "138.197.19.209", referrer: "http://138.197.19.209/vizes/Projects"
2016/12/10 17:41:55 [error] 12773#12773: *52 open() "/home/urban/static/img/projects.png" failed (2: No such file or directory), client: 24.11.95.201, server: 138.197.19.209, request: "GET /static/img/projects.png HTTP/1.1", host: "138.197.19.209", referrer: "http://138.197.19.209/vizes/Projects"
2016/12/10 17:41:55 [error] 12773#12773: *55 open() "/home/urban/static/img/project_savings.png" failed (2: No such file or directory), client: 24.11.95.201, server: 138.197.19.209, request: "GET /static/img/project_savings.png HTTP/1.1", host: "138.197.19.209", referrer: "http://138.197.19.209/vizes/Projects"

Chrome Developer Tools Console (just in case)

loadScript @ tableau-2.js:28(anonymous function) @ tableau-2.js:32(anonymous function) @ tableau-2.js:33
Projects:94 GET http://138.197.19.209/static/img/projects.png 404 (Not Found)

Answer 1

The general checklist I use is this:

1. Make sure the files exist in the directory:

   ls -lah /home/urban/static/img/projects.png
   

2. Make sure that the files in that directory are readable by the nginx user:

   # Note we are making these files world-readable here 
   # alternatives are to use a common gunicorn/nginx user
   # or to use a group for both the nginx & gunicorn users.
   chmod 0755 /home/urban
   find /home/urban/static -type d -exec chmod a+rx {} \; 
   find /home/urban/static -type f -exec chmod a+r {} \;
   

3. If the files do not exist in (1), make sure you have run the collectstatic management command. It will copy all of the static subdirectories from your INSTALLED_APPS and copy them over to STATIC_ROOT