Nginx wordpress website loading on /blog domain but files not loading - wordpress

Question

Im trying to containerize my Wordpress installation.
Although Wordpress is installed in the root directory, I need to server it on www.example.com/blog domain.
Setup:
Following is my docker-compose file (I'm loading variables using an .env file):
version: '3.9'
services:
wordpress:
# default port 9000 (FastCGI)
image: wordpress:6.1.1-fpm
container_name: wp-wordpress
env_file:
- .env
restart: unless-stopped
networks:
- wordpress
depends_on:
- database
volumes:
- ${WORDPRESS_LOCAL_HOME}:/var/www/html
- ${WORDPRESS_UPLOADS_CONFIG}:/usr/local/etc/php/conf.d/uploads.ini
environment:
- WORDPRESS_DB_HOST=${WORDPRESS_DB_HOST}
- WORDPRESS_DB_NAME=${WORDPRESS_DB_NAME}
- WORDPRESS_DB_USER=${WORDPRESS_DB_USER}
- WORDPRESS_DB_PASSWORD=${WORDPRESS_DB_PASSWORD}
database:
# default port 3306
image: mysql:8
container_name: wp-database
ports:
- 3306:3306
env_file:
- .env
restart: unless-stopped
networks:
- wordpress
environment:
- MYSQL_DATABASE=${MYSQL_DATABASE}
- MYSQL_USER=${MYSQL_USER}
- MYSQL_PASSWORD=${MYSQL_PASSWORD}
- MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
volumes:
- ${MYSQL_LOCAL_HOME}:/var/lib/mysql
command:
- '--default-authentication-plugin=mysql_native_password'
nginx:
# default ports 80, 443 - expose mapping as needed to host
image: nginx:1
container_name: wp-nginx
env_file:
- .env
restart: unless-stopped
networks:
- wordpress
depends_on:
- wordpress
ports:
- "8080:80" # http
- "443:443" # https
volumes:
- ${WORDPRESS_LOCAL_HOME}:/var/www/html
- ${NGINX_CONF}:/etc/nginx/conf.d/default.conf
- ${NGINX_SSL_CERTS}:/etc/ssl:ro
- ${NGINX_LOGS}:/var/log/nginx
networks:
wordpress:
name: wp-wordpress
driver: bridge
Following is my nginx config:
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name www.example.com;
index index.php index.html index.htm;
root /var/www/html;
server_tokens off;
client_max_body_size 75M;
# update ssl files as required by your deployment
ssl_certificate /etc/ssl/fullchain.pem;
ssl_certificate_key /etc/ssl/privkey.pem;
# logging
access_log /var/log/nginx/wordpress.access.log;
error_log /var/log/nginx/wordpress.error.log;
# some security headers ( optional )
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
location /blog {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
try_files $uri = 404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass wordpress:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
location ~ /\.ht {
deny all;
}
location = /favicon.ico {
log_not_found off; access_log off;
}
location = /favicon.svg {
log_not_found off; access_log off;
}
location = /robots.txt {
log_not_found off; access_log off; allow all;
}
location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
expires max;
log_not_found off;
}
}
What is working:
The blog is accessible on https://www.example.com/blog
What is not working:
The blog tries to load files at https://www.example.com/blog/wp-content/themes/my-theme/images/sprite.webp
This returns as 404
The file is accessible on the url without /blog (https://www.example.com/wp-content/themes/my-theme/images/sprite.webp)
I think it should only be a tweek in nginx conf to get the files to load, but Im unable to figure that out.