Как ссылку на изображение передать в аргументах? (React JS) в styled-components в background-image передать ссылку на изображение.

[ivan.tiran]

Добрый день. Мне надо в styled-components в background-image передать ссылку на изображение.

Пока сделал так

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

import URL from "../images/stars_88874.png"

export const IconButton = ( { text, imageUrl } ) => {
     return (
        <Wrap>
            { text }
        </Wrap>
    );
};

const Wrap = styled.div`
    box-sizing: border-box;
    background-image: url(${URL});
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    background-size: 100%;
    text-align: center;
    font-size: 1.15rem;
    border-radius: 15px;
    font-family: Calibri, sans-serif;

    &:hover{
        border: 3px solid grey;
    }
`;

Но, мне надо, чтобы imageUrl передавался в background-image. Таких компонентов будет несколько. Создавать каждый копипастом не хочется. Спасибо.

[ivan.tiran]

Разобрался сам

export const ImageButton = ({ headerText, imageUrl }) => {
  return (
    <Wrap>
      <TEXT>
        <TEST>
          {headerText}
        </TEST>
      </TEXT>
      <CheckBoxImage>
        <InputWrap>
            <input type="checkbox"/>
        </InputWrap>
        <IMAGE image={imageUrl}>
        </IMAGE>
      </CheckBoxImage>
    </Wrap>
  );
};

const Wrap = styled.div`
  /*border: 1px solid red;*/
  box-sizing: border-box;
  cursor: pointer;
  width: 200px;
  border-radius: 15px;
  &:hover{
    border: 2px solid grey;
  }
`;

const TEXT = styled.div`
  height: 3rem;
  display: table;
  width: 200px;
  text-align: center;
`;

const TEST = styled.div`
  display: table-cell;
  vertical-align: middle;
  text-align: center;
`;

const IMAGE = styled.div`
  background-image: url(${( {image} ) => image});
  background-repeat: no-repeat;
  background-size: 128px;
  height: 128px;
  width: 128px;
  /*border: 2px solid green;*/
`;

const CheckBoxImage = styled.div`
  display: flex;
  justify-content: center;
`;

const InputWrap = styled.div`
  display: flex;
  align-items: flex-end;
`;

Картинки пришлось хранить на сервере и брать их оттуда.

[Alar]

ivan.tiran, спасибо за ответ )