background image not importing correctly

[kamesh-git]

This is one of the line in my index.js code
<div className={style.bg_img}></div>
corresponding css code

.bg_img{ 
    background: url('../public/flower/flowers.png') white fixed ;
    position: fixed;
    filter: blur(8px);
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;

}

in the above line i'm setting a backround image for that div element and i'm importing the styles very correctly

when i host it in my localhost everything works good and when i inspect the element i'm getting this results

but when i host my page in vercel for production the backround image is not importing properly and i'm rendering with some different url

and other than index.js page the background works very well

[thrila]

did you get any solution? having the same problem but i hosted my project on github

[valcosmos]

I tried this, it does work. Hope it can help u.

[thrila]

i tried that too it worked when my website wasnt live when i hosted it the background image wouldnt show up do you know ow to solve that? also all the other images ta=hat arent background images work fine

[aphrysof]

Having the same Issue
How did you change the image path

[vakulio]

Same problem. Please tell me how to solve it

[thrila]

is Your project Live as well?

[vakulio]

No. Migrated to Astro.js)

[thrila]

cool i'm happy for you anyways about how i fixed this issue ... first of the problem .. i uploaded a website made with next js to github (hosted it on github) the images didnt show up when i modified the image path to the repo file of the uploaded repo it worked!!!

[imthevk]

I faced the same problem when deploying website to vercel ,
By using this runtime config it sorted out.
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();

[rambharat-dwt]

where i import this

[SamKomesarook]

An alternative is to use inline styles in addition to the class:

import img from '../assets/images/image.jpg'

//...

<div style={{
      backgroundImage: `url(${img.src})`,
    }}
className={style.bg_img}></div>

[1Dedios]

I just used the style attribute as is with the import statement and it worked (I didn't need extra CSS styling). Thank you for this 🚀

[Prajwal-Pardhi]

Try changing the URL syntax, in my case '/' was missing at the beginning but still img is visible on localhost but not after hosting. Try changing url of the image by inspecting the page, maybe it could work.