Nextjs，公共文件夹中的映像在部署时找不到，但在本地找到

e0uiprwp 于 2023-10-18 发布在其他

关注(0)|答案(4)|浏览(253)

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

# locally
./src/public/images/

然后当我进行部署时，找不到映像。但是当我将公共文件夹放在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

next.js

来源：https://stackoverflow.com/questions/60797746/nextjs-images-in-public-folder-not-found-on-deploy-but-are-found-locally

4条答案

按热度按时间

2ekbmq321#

公用文件夹必须位于根目录中。没有其他方式配置。
public内部的文件可以由代码从基URL（/）开始引用。/public/path/image.jpg用作/path/image.jpg
https://nextjs.org/docs/basic-features/static-file-serving

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

5fjcxozz2#

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

玩得开心点

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

9njqaruj3#

您可能会遇到字母大小写问题，如.png和. png。你必须在代码中使用与图像扩展大小写相同的大小写。

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

xwmevbvl4#

我将这些添加到next.config.js中：

output: 'export',
  distDir: 'out',

请参见https://nextjs.org/docs/pages/building-your-application/deploying/static-exports。
在Netlify环境变量中，我设置了NETLIFY_NEXT_PLUGIN_SKIP=true。
https://docs.netlify.com/configure-builds/environment-variables/
但对我来说最重要的一步是：
不知何故，我的.gitignore阻止了某些图像提交到repo。因此，镜像文件存在于本地，但从未被推送到GitHub，因此从未被部署到Netlify！

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

我来回答

Nextjs，公共文件夹中的映像在部署时找不到，但在本地找到

编辑：

4条答案

相关问题

热门标签

最新问答