Web Service not displaying images

I’ve searched, but my few matches aren’t exactly like the issue I’m experiencing. Local testing works fine, but deploying in Render ignores the images. My expectation is the background image will load, it doesn’t.

Root Directory:
.
├── main.py
└── static
├── about.html
├── css
│ └── style.css
├── images
│ └── background_image.png
└── index.html

main.py:
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles

app = FastAPI()

Mount the static directory

app.mount(“/static”, StaticFiles(directory=“static”), name=“static”)

@app.get (“/”)
async def welcome():
return FileResponse(‘static/index.html’)

@app.get (“/about”)
async def about():
return FileResponse(‘static/about.html’)

index.html

Welcome Page
About

This site is under construction. Thank you for your patience.

style.css
/* style.css */

.navbar {
position: absolute;
top: 0;
right: 0;
padding: 10px;
}

body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
text-align: center;
padding: 50px;
background-image: url(‘/static/images/background_image.png’);
background-size: cover;
background-position: fixed;
}

h1 {
color: #007bff;
}

The site builds successfully, no errors in the log. The background image doesn’t load. I’ve included the index.html and the style.css along with the folder structure. There is likely something Render specific that I’m missing to allow the image to load appropriately, but so far my search hasn’t yielded anything specific to my issue.

Let me know if you need me to share anything else.

Just for craps and giggles, I deleted and redeployed. The site renders correctly now. I might have been a bit impatient after I deployed from a commit. I’ll wait a few hours before sounding the alarm with future changes.

1 Like