使用 NGINX 通过 HTTPS 在 NextJS 中加载 jpg 图像时出现问题

Question

由于某种原因，在通过 Nginx 工作时，无法加载 jpg 图像。虽然 svg 图像工作正常。一切都通过 HTTP (127.0.0.1:3000) 运行，所以问题出在 NGINX 中。我不知道如何解决这个问题。我使用 Node v20、npm、nginx、nextjs v13.5.4

Nginx 配置：

server {
    server_name ylous.keenetic.link www.ylous.keenetic.link;

    server_tokens off;

    gzip on;
    gzip_proxied any;
    gzip_comp_level 4;
    gzip_types text/css application/javascript image/svg+xml;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/ylous.keenetic.link/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ylous.keenetic.link/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.ylous.keenetic.link) {
        return 301 https://$host$request_uri;
        } # managed by Certbot


        if ($host = ylous.keenetic.link) {
            return 301 https://$host$request_uri;
            } # managed by Certbot


            listen 80;

            server_name ylous.keenetic.link www.ylous.keenetic.link;
            return 404; # managed by Certbot


        }

下一个图像用法：

<Image src={Snicker} alt="Sniker" width={200} height={80} className="rounded-xl" priority/>

示例请求：https://ylous.keenetic.link/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsnicker.2ee2553c.jpg&w=640&q=75
代码：500
响应：“url”参数有效，但上游响应无效

所有图像预计都能正常加载。在 DigitalOcean 上发现有人有同样的问题，他解决了它，但没有提供解决方案本身 LOL

Answer 1

一切正常。我会留下问题，以便其他遇到此问题的人可以找到解决方案