Need to set background image from API response in ReactJS

Question

Need to set a background image from API response in ReactJS

Sample code:

useEffect(() => {
axios.get(`https://apiaddress=${API_KEY}`)
.then(res=>{
    console.log(res);
    setRetrieved(res.data);
    console.log(retrieved);
  
})
.catch(err=>{
    console.log(err)
})
     return(
    <div ClassName="home" style={{backgroundImage:`url({retrieved.imageurl}{/*or 
    any other var of type string*/}), width: 1920, height: 1080 } </div>

Also tried to save the retrieved image in a variable, working fine but the image (which is coming in response) is not rendered as background.

marc_s · Accepted Answer · 2021-03-04 05:34:03Z

2

Update your style prop

style={{backgroundImage: `url('${retrieved.imageurl}')`}}

edited Mar 4, 2021 at 5:34

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 3, 2021 at 20:31

Arfan ali

4392 silver badges5 bronze badges

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

Comments

Suraj Rao · Accepted Answer · 2022-09-07 14:06:29Z

0

You can try this way if your image comes from an API:

return(
<div ClassName="home" style={{backgroundImage:"url(" + retrieved.imageurl + ")", width: 1920, height: 1080 } </div>

For my answer, I referred to this code answer: Setting a backgroundImage With React Inline Styles

edited Sep 7, 2022 at 14:06

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Sep 7, 2022 at 14:01

pkderlam87

1

Collectives™ on Stack Overflow

Need to set background image from API response in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related