how to set picture as background image inside an url with inline css in react js

Question

i have started just learning react js and i'm making a carousel where i want to set the picture as a bgImg putting it inside url() in a div but picturing is not getting render but when i'm puting the same in tag it is coming

import { Banners } from '../Assignment/carasoul_data'

<div className="carousel-area" style={{backgroundImage : `url(${Banners[0]})`}}>

//picture not getting render

some have suggested to use required but that also didn't worked for me

<div className="carousel-area" style={{backgroundImage: `url(${require(Banners[0])})`}} >
     </div>

i have tried this too

"url(" + Banners[0]+ ")"

My images list which i want to render

import banner1 from'../Assignment/carasoul/Web assignment.jpeg'
import banner2 from'../Assignment/carasoul/Web assignment2.jpeg'
import banner3 from'../Assignment/carasoul/Web Banner3.jpeg'
import banner4 from'../Assignment/carasoul/Web Banner4.jpeg'

export const Banners =[banner1,banner2,banner3,banner4]

junnubhai · Accepted Answer · 2022-02-25 06:43:34Z

1

It is not a react error just you have to add min-height & width to your carousel css Whenever you provide empty div you have to give specific height & width therefore the image is not visible

you can try below sandbox for help

https://codesandbox.io/s/zen-kare-h6l648

answered Feb 25, 2022 at 6:43

junnubhai

634 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S98 Over a year ago

thank you so much for your response.. but i have also given height and width in the css file its just coming a blank area...and after playing arround i got to know that it is not showing .jpeg it's working fine when i use .png and in the other side .jpeg is working fine with <img src> could you please guide me what to to do

junnubhai Over a year ago

you can see my sandbox i have added jpg files only

S98 Over a year ago

yeahhh i'm sharing you my sendbox link please help me with my thing..i'll be greatful. codesandbox.io/s/empty-bush-e87ez1

Collectives™ on Stack Overflow

how to set picture as background image inside an url with inline css in react js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related