CODEWITHSUNDEEP
reactjsdeploymentnext.jsbackgroundvercel
MagnusEffect
MagnusEffect

Reputation: 3925

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

Upvotes: 1

Views: 2517

Answers (4)

Tushar Sharma
Tushar Sharma

Reputation: 145

Faced a similar issue and came across this post. For me the path was correct. As the top answer suggested. I was using /File-name.png instead of the the /directory/file-name.png as it's made in the post.

Changing the dash - to underscore _ and remove any capital letters worked for me.

/File-name.png -> /file_name.png

Upvotes: 0

johnnn
johnnn

Reputation: 200

Instead of css background, use JSX styling and the background image will show.

Here is an example.

First import the static image as such.

*import world from "../public/world.png";

Inside the jsx template, use it as background image

  • style={{backgroundImage:url(${world.src})}}

And don't forget to edit other background properties such as background repeat and background size in the css file.

Upvotes: 0

Suphawat
Suphawat

Reputation: 71

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)

Upvotes: 0

Matt Carlotta
Matt Carlotta

Reputation: 19772

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/

Upvotes: 6

Related Questions