部署在 Vercel 上的下一个基于 JS 的网站不显示背景图像

Question

我在 NextJS 上构建了一个网站并将其部署在 vercel 上。在

localhost:3000

的本地环境中，它显示背景图像，但在

vercel 

上它不显示背景图像。

以下为截图

在 Vercel 上：

本地：

我使用 tailwindCSS 设置背景图像，我在

tailwind.config.js

文件中定义了图像，并在不同的组件中使用它们。但这不是问题，因为它在本地环境中运行良好。

我不知道它的行为不同的原因是什么。

项目 GitHub 链接：https://github.com/mohitm15/Weather-Lytics

Answer 1

您应该利用 next 的静态文件服务从中加载图像，而不是在 tailwind 配置中使用对公共文件夹的相对导入。

例如，如果您查看 DOM，构建过程中生成的 URL 路径正在尝试利用

mini-css-extract-plugin

创建路径，但该路径无效：

使用静态文件服务时，您的 tailwind 配置将从：

'day_sun' : "url('../public/back_big.jpg')",

至：

 'day_sun' : "url('/back_big.jpg')",

编译时，路径可能看起来不完整，但它实际上将该请求定向到

/public/[image].[ext]

：

工作演示（天气搜索功能将无法工作，因为

NEXT_PUBLIC_API_KEY_1

未定义）：https://weather-lytics-refactor.vercel.app/

Answer 2

即使我从静态文件服务加载图像，我的应用程序仍然发生类似的错误。

该错误位于我的

/public/img

文件夹中。根据文档，似乎

/img

文件夹与某些下一个文件或文件夹具有相似的名称，这可能会导致错误。

要修复它，请确保您没有任何文件夹名称“img”或类似的名称。 。 。 （名称“pic”对我有用）

Answer 3

使用 JSX 样式代替 css 背景，背景图像将会显示。

这是一个例子。

首先导入静态图像。

*从“../public/world.png”导入世界；

在 jsx 模板内，将其用作背景图片

• 风格={{背景图片:

  url(${world.src})

  }}

并且不要忘记在 css 文件中编辑其他背景属性，例如背景重复和背景大小。

Answer 4

面临类似的问题并发现了这篇文章。对我来说，这条路是正确的。正如最佳答案所建议的那样。我使用的是

/File-name.png

而不是帖子中制作的

/directory/file-name.png

。

将破折号

-

更改为下划线

_

并删除对我有用的任何大写字母。

/File-name.png

->

/file_name.png