Как передать изображение в стилизованный компонент?

Question

Я использую styled-components в ReactJS и пытаюсь создать компонент, который может принять background-image в качестве реквизита. После некоторых исследований я попробовал это:

import SpeechBubble1 from '../images/home_images/Speech 1.png';
...

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

...

<SpeechBubble background={SpeechBubble1} />

Но это не работает. Проверяя в окне элемента браузера, я вижу, что я получаю Invalid property value для background-image.

Что я делаю не так?

Edit: Я также попытался сделать это, но это не сработало:

<SpeechBubble style={{background: `url(${SpeechBubble1})`}} />

Answer 1

Убедитесь, что вы включили height для стилизованного компонента, в противном случае он ничего не отобразит (если у него нет дочерних элементов, определяющих его размеры).

Рабочий пример :

---

компоненты / контейнер

import styled from "styled-components";

const Container = styled.div`
  height: 100vh;
  background-image: url(${({ background }) => background});
  background-repeat: no-repeat;
  background-size: cover;
`;

export default Container;

index.js

import React, { Fragment } from "react";
import { render } from "react-dom";
import reactbg from "./images/reactbg.png";
import Container from "./components/Container";
import GlobalStyles from "./components/GlobalStyles";
import Title from "./components/Title";

const App = () => (
  <Fragment>
    <GlobalStyles />
    <Container background={reactbg}>
      <Title>Hello World</Title>
    </Container>
  </Fragment>
);

render(<App />, document.getElementById("root"));

Answer 2

Вы можете использовать встроенный стиль:

<SpeechBubble style={{background: `url(${SpeechBubble1})`}} />