импорт изображений в React.js с стилизованной-компонентой

Question

Я с использованием стилизованной-компоненты и пытаюсь установить фоновое изображение, как так

const HeaderImage= styled.div` 
    background-image: url('../../assets/image.png'); 
'; 

Я также попытался без кавычек, например, так

const HeaderImage= styled.div` 
     background-image: url(../../assets/image.png); 
'; 

в обоих случаях я получаю тот же результат

http://localhost:3000/assets/image.png Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден)

Я использую Richard Kall's react starter

Файл определенно находится в указанном месте.

Я загружаю его неправильно?

Я должен упомянуть, что я новичок в этом (React и стилизованных-компоненты)

Answer 1

Вы должны импортировать изображения следующим образом (при условии, что вы WebPack настроены для импорта медиа-активов).

import myImage from '../../assets/image.png'; 

/* ... */ 

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