Nextjs，public 文件夹中的图像在部署时未找到，但在本地找到

Question

当我在本地开发时，当我将 /public 文件夹放在 /src/ 中时会找到图像：

# locally
./src/public/images/

然后当我进行部署时找不到图像。但是当我将 public 文件夹放在 src 之外时，会找到图像：

# deploy
./public/images/
./src/

我将图像用作：

<img src="/images/my-image.jpg" alt="" />

是否有我必须使用的配置设置？

---

编辑：

完整结构：

|- .now/
|  |-  project.json
|  └── README.txt  
|- next.config.js
|- now.json
|- src/
|  |- .next/
|  |  |-  build-manifest.json
|  |  |-  react-loadable-manifest.json
|  |  |-  cache/
|  |  |-  server/
|  |  └── static/
|  |-  pages/
|  └── next-env.d.ts

Answer 1

public 文件夹必须位于根目录中。否则无法配置。

public 中的文件随后可以被您的代码从基础 URL (/) 开始引用。 /public/path/image.jpg 担任 /path/image.jpg

https://nextjs.org/docs/basic-features/static-file-serving

Answer 2

Next.js 可以在根目录 中名为 public 的文件夹下提供静态文件，例如图像。 可以查看文档here

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

玩得开心。

Answer 3

您可能对 .png 和 .PNG 等字母大小写有疑问。您必须在代码中使用与图像扩展案例相同的案例。