Next JS 不渲染图像 ubuntu 和 nginx 部署

Posted 2023-03-06

【中文标题】Next JS 不渲染图像 ubuntu 和 nginx 部署

【英文标题】：Next JS not rendering the images ubuntu and nginx deployement

【发布时间】：2021-08-28 18:26:12

【问题描述】：

我已经使用 nginx 在 Ubuntu 16.0.4 上部署了我的 Next.js 应用程序。

我已经在根 mywebsite.com 上部署了一个应用程序，它运行良好。我正在尝试在mywebsite.com/some-keyword

部署此应用

该应用似乎工作正常，但无法渲染图像。

我该如何解决这个问题？

Nginx 更新：

location /some-keyword 
  proxy_pass http://localhost:8000;
  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;

  # First attempt to serve request as file, then
  # as directory, then fall back to displaying a 404.
  # try_files $uri $uri/ =404;

next.config.js

module.exports = 
  basePath: '/some-keyword'
;

【问题讨论】：

您在开发工具的“网络”选项卡中看到了哪些图像请求？他们是 404 吗？

我也试过https://mywebsite.com/_next/image?url=params，但也没用

您是否正在使用next/image 组件？你能分享一些你如何设置图像的代码吗？

是的，使用next/image 就像这样<Image src='/img/alert-down.png' width=550 height=320 />

【参考方案1】：

来自 Next.js Base Path docs:

使用next/image组件时，需要在src前面加上basePath。

在您的情况下，假设您的 basePath 是 /some-keyword 您的代码应该如下所示：

<Image src='/some-keyword/img/alert-down.png' width=550 height=320 />