CODEWITHSUNDEEP
cssreactjsstyled-components
sebastianw90
sebastianw90

Reputation: 33

Dynamic background image in React.js with styled-components

I'm trying to make a react component that has a background image which is provided as a url by JSON. This JSON has multiple objects inside, one of which (let's call it imgObj) has the url in it (imgObj.url).

Now, I want to use that url for the background image, but fail miserably.

Here's what I'm kind of trying to do:

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
    background-image: `url(${props => props.imgObj.url})` // this is where I think the problem is
`;

const Component = ({ imgObj, otherStuff }) => (
    <Container>
        {otherStuff}
    </Container>
);

export default Component

I tried couple of different variations of background-image line, but can't get it right.

I am using styled-components here but honestly, I'd be happy with any solution that works.

Upvotes: 3

Views: 18405

Answers (5)

emkarachchi
emkarachchi

Reputation: 802

If someone is looking for a solution using typescript and styled components,

import styled from 'styled-components';

interface Props {
  imageUrl: string;
}

const Container = styled.div<Props>`
  background-image: url(${(props) => props.imageUrl});
`;

Upvotes: 0

Benedetto Abbenanti
Benedetto Abbenanti

Reputation: 654

For anyone else who want the solution, using styled-components

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
background-image: `url(${props => props.imgObj ? props.imgObj.url : 'PLACEHOLDERIMG.png'})` // this is where I think the problem is
`;

const Component = ({ imgObj, otherStuff }) => (
<Container imgObj> // <=== Here is where the problem actually is!
    {otherStuff}
</Container>
);

export default Component

The reason is that you forget to insert imgObj props to your Container styled-component. So the component don't know where find props.imgObj.

Upvotes: 7

Lauris Kuznecovs
Lauris Kuznecovs

Reputation: 929

If imgObj will be undefined background-image will not be rendered at all.

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  ${props => props.imgObj && props.imgObj.url && 
    `background-image: (${props.imgObj.url})`
  }
`

const Component = ({ imgObj, otherStuff }) => (
<Container imgObj={imgObj}>
    {otherStuff}
</Container>
)

export default Component

Upvotes: 0

Phil Pl&#252;ckthun
Phil Pl&#252;ckthun

Reputation: 1449

You've got back ticks around your "background-image" value. Remember that styled-components generates actual CSS, so this won't generate a valid CSS value.

Also, I'd recommend you to add quotes around your URL to avoid bad surprises:

const Container = styled.div`
  background-image: url('${props => props.imgObj.url}');
`;

So all in all, don't forgot that it's actual CSS you're generating, don't forget semicolons if possible (although those are often autocompleted, if they're missing, and be wary of what you're interpolating :)

Upvotes: 1

Sivadass N
Sivadass N

Reputation: 927

I have not used styled-components, but you can define the background image as inline style in react as below:

...
<div style={{backgroundImage: `url(${props.imgObj.url})`}} >
</div>
...

Upvotes: 2

Related Questions