Background Image mapping in Reactjs with Material UI

Question

everyone please advise, I have an array with images, and I've created a mapping content, however I can not put a Background Image, in styles of a component. Other array objects is properly working

{DlCards.map((mdlcard) => {
    return(
    <Grid
        item
        xs = {mdlcard.grid_xs} 
        sm = {mdlcard.grid_sm} 
        md = {mdlcard.grid_md}
        container
        justify = 'space-between'
        style   = {{
            width:      '25%', 
            marginTop:  60,
            backgroundImage: {mdlcard.background}
            
        }}>

background-image in CSS uses the syntax background-image: url(<url>), you need to replicate that with your style there, aka backgroundImage: url(${mdlcard.background})` — Rodentman87
– Rodentman87, Commented Jul 21, 2020 at 5:16

Monzoor Tamal · Accepted Answer · 2020-07-20 21:11:53Z

1

style   = {{
            width:      '25%', 
            marginTop:  60,
            backgroundImage: {`url(${mdlcard.background})}
            
        }}>

you missed the url

answered Jul 20, 2020 at 21:11

Monzoor Tamal

8106 silver badges16 bronze badges

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

2 Comments

Unity Over a year ago

Thank you, very much

Monzoor Tamal Over a year ago

you are welcome. Can i get a up vote and right answer mark

Collectives™ on Stack Overflow

Background Image mapping in Reactjs with Material UI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related