Next JS based site deployed on Vercel does not show background image答案

【问题标题】：Next JS based site deployed on Vercel does not show background imageNext JS based site deployed on Vercel does not show background image
【发布时间】：2022-12-27 14:41:58
【问题描述】：

I built a website on NextJS and deployed it on vercel. On the local environment at localhost:3000, it shows the background image but on vercel it does NOT show the background image.

Below are screenshots

On Vercel :

On Local :

I am setting the background image with the tailwindCSS where I defined the images in tailwind.config.js file and using them in different components. But that is not the issue as it is working fine in local envirenment.

I don't know what is the reason that why it is behaving differently.

Project GitHub Link : https://github.com/mohitm15/Weather-Lytics

【问题讨论】：

While providing a link to the code is fine, your question should be self-contained and preferably not rely on external resources to be answered. Please add the relevant code to the question.

标签： reactjs deployment next.js background vercel

【解决方案1】：

Instead of using relative imports to the public folder within your tailwind config, you should leverage next's static file serving to load images from it.

For example, if you look in the DOM, the URL pathing generated during the build process is trying to utilize mini-css-extract-plugin to create a path, but the path is not valid:

When using static file serving, your tailwind config would change from:

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

to:

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

When compiled, the path may look incomplete, but it's actually directing that request to /public/[image].[ext]:

Working demo (the weather searching feature willnotwork since NEXT_PUBLIC_API_KEY_1 is undefined): https://weather-lytics-refactor.vercel.app/

【讨论】：

Vey Very Thanks Man for solving my query.

【解决方案2】：

Even though I load my images from static file serving, similar bug still happened to my app.

The bug is at my /public/img folder. According to the document, seem like the /img folder have similar name with some next file or folder, which can cause bug.

To fix it make sure you don't have any folder name "img" or something like that . . . (name "pic" work for me)

【讨论】：