使用Docker与Nginx搭建本地WordPress站点时图片404无法访问问题

Hey there, let's troubleshoot that image 404 issue you're facing. Based on your docker-compose.yml setup, this is almost always related to path mismatches between containers, incorrect Nginx configuration, or WordPress URL settings. Let's break down the steps to fix it:

1. Verify WordPress Media & Site URL Settings #

First, head to your WordPress admin dashboard → Settings → Media. Make sure:

• The "Full URL path to files" matches your external site URL (e.g., http://localhost:8000/wp-content/uploads/)
• You haven't set a custom "Store uploads in this folder" unless you're intentional about it (leave it blank to use the default wp-content/uploads)

Also, check your wp-config.local.php for these critical constants—they should match the URL you use to access your site:

define('WP_HOME', 'http://localhost:8000');
define('WP_SITEURL', 'http://localhost:8000');
define('UPLOADS', 'wp-content/uploads'); // Ensure this points to the correct relative path

2. Check Nginx's Root Directory & Static File Rules #

Your Nginx container mounts wp-content to /var/www/wp-content, but does your Nginx config set the correct root directory? The root should point to the WordPress root folder in the container (which is /var/www if your PHP container uses that as the WP root).

Here's a sample Nginx server block that should work for your setup:

server {
    listen 80;
    server_name localhost;
    root /var/www; # This is key—make sure this matches your WP root in containers
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    # Handle static files directly (including images)
    location ~* \.(jpg|jpeg|png|gif|ico|webp)$ {
        expires 30d;
        access_log off;
        add_header Cache-Control "public, immutable";
    }

    # Pass PHP requests to the PHP container
    location ~ \.php$ {
        fastcgi_pass php:9000; # Match your PHP service name from docker-compose
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

If your Nginx config uses a different root path (like /var/www/html), that's likely the cause of the 404—adjust it to /var/www to align with your volume mounts.

3. Validate Volume Mount Permissions #

Both your PHP and Nginx containers share the wp-content volume, but we need to make sure the files are accessible:

• On your host machine, run chmod -R 755 wp-content/uploads to ensure read access for the web server
• For Linux hosts, you might also need to fix ownership: sudo chown -R www-data:www-data wp-content/uploads (matches the user Nginx/PHP run as in most images)
• If you're on Mac/Windows with Docker Desktop, permission issues are less common, but double-check that the wp-content folder isn't marked as read-only.

4. Debug with Nginx Logs #

If the above steps don't work, check Nginx's error logs to get more details:

# Replace <nginx-container-name> with your container's name (find it with docker ps)
docker logs <nginx-container-name>

Look for lines mentioning "404"—they'll tell you if Nginx is looking for the image in the wrong path, or if there's a permission denied error.

Final Quick Test #

Upload a new image, copy its full URL (from the media library), and paste it directly into your browser. If you still get a 404, compare the URL path to the actual file location in your host's wp-content/uploads folder—this will quickly reveal if there's a mismatch in the year/month subfolders or filename.

内容的提问来源于stack exchange，提问作者Felice Giuliano