部署在 Vercel 上的下一个基于 JS 的网站不显示背景图像
Mag*_*ect 1 deployment background reactjs next.js vercel
我在 NextJS 上构建了一个网站并将其部署在 vercel 上。在本地环境中localhost:3000，它显示背景图像，但在vercel 它上不显示背景图像。
以下是截图
关于维塞尔：
在本地：
我正在使用 tailwindCSS 设置背景图像，我在文件中定义了图像tailwind.config.js并在不同的组件中使用它们。但这不是问题，因为它在本地环境中运行良好。
我不知道它的行为不同的原因是什么。
项目 GitHub 链接： https: //github.com/mohitm15/Weather-Lytics
您应该利用 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/
| 归档时间： |
|
| 查看次数： |
1748 次 |
| 最近记录： |