我在NextJS上构建了一个网站，并将其部署在Vercel上，在localhost:3000的本地环境上，它显示背景图像，但在vercel上它不显示背景图像。
以下为截图
顶点上：
在本地：
我用tailwindCSS设置了背景图片，我在tailwind.config.js文件中定义了图片，并在不同的组件中使用它们。但这不是问题所在，因为它在本地环境中工作得很好。
我不知道是什么原因，为什么它的行为不同。
项目GitHub链接：https://github.com/mohitm15/Weather-Lytics
2条答案
按热度按时间xuo3flqw1#
在tailwind配置中，不要使用相对导入到公共文件夹，而应该利用next的static file serving从公共文件夹加载图像。
例如，如果您查看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/6uxekuva2#
即使我从静态文件服务加载图像，类似的错误仍然发生在我的应用程序上。
错误在我的
/public/img文件夹。根据document，似乎/img文件夹有类似的名称与一些下一个文件或文件夹，这可能会导致错误。要修复它，请确保您没有任何文件夹名称“img”或类似的东西...（名称“pic”为我工作）