Динамическое свойство в CSS для Styled Component и ReactJs

Question

Я пытаюсь установить динамическое изображение, например:

const IntroVideoWrapper = styled.div`
  background-image: url("../images/${(props)=>props.image_prefix}_427.png"); 
`;

Однако изображение не отображается. когда я смотрю в инструментах отладчика, он анализируется как:

background-image: url("../images/" + selfie + "_427.png" )

вместо:

background-image: url("../images/selfie_427.png" )

Что не так?

Answer 1

Функция обратного вызова должна возвращать всю строку, как показано ниже

background: ${props => `url('../images/${props.selfie}_427.png.jpg')`};

Песочница

Answer 2

Вы допустили ошибку при использовании `` в первой попытке.

background-image: url(${props => `../images/${props.image_prefix}_427.png`});