React-boilerplate: background-image css

[williamgranli]

What's the currently best solution to fixing the bug with file imports not working from css? There are a lot of old issues from ~June 2016 which suggest patching webpack, but I assume there are better ways of going about it now.

I'm talking about just doing this, for example:

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

Where props.backgroundImage is 'img/background.jpg' for example.

When doing this the image doesn't show up at all, even though the path looks correct when inspecting the html element.

[elisechant]

Have you tried simply:

import MyImage from '../images/background_image.png';

const Wrapper = styled.div`
  background-image: `url(${MyImage})`
`;

? or 2. can you exclude image path as being the issue?

[williamgranli]

Importing it worked fine... for some reason my brain didn't realize I was working with a .js file now with styled-components.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.