Search code examples
reactjsdeploymentnext.jsbackgroundvercel

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

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 :

local

On Local :

withimg

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

Solution

  • 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: enter image description here

    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]: enter image description here

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