New Django Project static photos will not load

Good Morning Everyone

I setup a new Django Project and I have a url for photos and it works fine in development. When I deployed to fly the website works fine but when you click on the photos urls you get “server error 500”. Spent five hours reading all of the post on static files and I still can’t seem to find the problem.
your help would be grateful.

Here is my setting file from Django

“”"
Django settings for django_project project.

Generated by ‘django-admin startproject’ using Django 4.2.7.

For more information on this file, see

For the full list of settings and their values, see

“”"

from pathlib import Path
from environs import Env

env = Env()
env.read_env()

Build paths inside the project like this: BASE_DIR / ‘subdir’.

BASE_DIR = Path(file).resolve().parent.parent

Quick-start development settings - unsuitable for production

See Deployment checklist | Django documentation | Django

SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = env.str(“SECRET_KEY”)

SECURITY WARNING: don’t run with debug turned on in production!

DEBUG = env.bool(“DEBUG”, default=False)

ALLOWED_HOSTS = [“.fly.dev”,“localhost”, “127.0.0.1”]
CSRF_TRUSTED_ORIGINS = [“https://*.fly.dev”]

Application definition

INSTALLED_APPS = [
“django.contrib.admin”,
“django.contrib.auth”,
“django.contrib.contenttypes”,
“django.contrib.sessions”,
“django.contrib.messages”,
“whitenoise.runserver_nostatic”,
“django.contrib.staticfiles”,
“crispy_forms”,
“crispy_bootstrap5”,
“scores”,
“accounts”,
“phone_field”,
“pages”,
“django_filters”,
“schedule”,
“photos”,

]
MIDDLEWARE = [
“django.middleware.security.SecurityMiddleware”,
“whitenoise.middleware.WhiteNoiseMiddleware”,
“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 = “django_project.urls”

TEMPLATES = [
{
“BACKEND”: “django.template.backends.django.DjangoTemplates”,
“DIRS”: [BASE_DIR / “templates”],
“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 = “django_project.wsgi.application”

Database

Settings | Django documentation | Django

DATABASES = {
“default”: env.dj_db_url(“DATABASE_URL”, default=“sqlite:///db.sqlite3”),
}

Password validation

Settings | Django documentation | Django

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

Internationalization and localization | Django documentation | Django

LANGUAGE_CODE = “en-us”

TIME_ZONE = “UTC”

USE_I18N = True

USE_TZ = True

Static files (CSS, JavaScript, Images)

How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django

STATIC_URL = “/static/”
STATICFILES_DIRS = [BASE_DIR / “static” ]
STATIC_ROOT = BASE_DIR / “staticfiles” # new
STORAGES = {
“default”: {
“BACKEND”: “django.core.files.storage.FileSystemStorage”,
},
“staticfiles”: {
“BACKEND”: “whitenoise.storage.CompressedManifestStaticFilesStorage”,

},

}

Here is my fly.toml file

fly.toml app configuration file generated for summer-flower-6727 on 2023-11-15T18:19:42-05:00

See Fly Launch configuration (fly.toml) · Fly Docs for information about how to use this file.

app = “summer-flower-6727”
primary_region = “dfw”
console_command = “/code/manage.py shell”

[build]

[deploy]
release_command = “python manage.py migrate”

[env]
PORT = “8000”

[http_service]
internal_port = 8000
force_https = true
auto_stop_machines = true
auto_start_machines = true
min_machines_running = 0
processes = [“app”]

[[statics]]
guest_path = “code/staticfiles”
url_prefix = “/static/”

[mounts]
source=“static”
destination=“Users/ejmmanning/Desktop/code/match-score/static/images”

Here is my template with the photos

{% extends “base.html” %}
{% load static %}

{% block content %}

body {
  background-color: lightblue;

} 

<img src=“{% static “images/jackb.jpg” %}” alt=“home” />
<img src=“{% static “/images/jackr.jpg” %}” alt=“home” />
<img src=“{% static “/images/bill.jpg” %}” alt=“home” />
<img src=“{% static “/images/bob.jpg” %}” alt=“home” />
<img src=“{% static “/images/rick.jpg” %}” alt=“home” />
<img src=“{% static “/images/joe.jpg” %}” alt=“home” />

{% endblock content %}

It might help to give us a concrete example of a URL that triggered a 500 response…

I tried a couple that I guessed from your template, but they both arrived here with 200 OK:

curl 'https://summer-flower-6727.fly.dev/static/images/jackb.jpg'
curl 'https://summer-flower-6727.fly.dev/static/images/bill.jpg'

These came across the wire with fly-cache-status: HIT, which is consistent with the correct operation of your [[statics]] definition above.

The solution was you have to format the information in Django template like this

JackB

JackR

Bill

Bob