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

33qvvth1 于 2023-10-17 发布在 Nginx

关注(0)|答案(1)|浏览(142)

由于某些原因，在使用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上找到了一个有相同问题的人，他解决了这个问题，但没有提供解决方案，哈哈

nginx

来源：https://stackoverflow.com/questions/77250028/problem-with-loading-jpg-images-in-nextjs-with-nginx-over-https

1条答案

按热度按时间

qco9c6ql1#

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;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Url-Scheme $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;        
    proxy_redirect off;
}

一切正常。我会把这个问题留下，以便其他遇到这个问题的人能够找到解决办法

赞(0）回复(0）举报 2023-10-17

我来回答

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

1条答案

相关问题

热门标签

最新问答