web-dev-qa-db-ja.com

スタイル付きコンポーネントを使用してReact.jsに画像をインポートする

スタイル付きコンポーネントを使用しており、背景画像を次のように設定しようとしています

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（Not Found）のステータスで応答しました

リチャード・コールの反応スターター を使用しています

ファイルは確実に指定された場所にあります。

間違ってロードしていますか？

言及する必要があります、私はこれに非常に新しいです（React、およびstyled-components）

reactjsstyled-components
14
vedran

次の方法でイメージをインポートする必要があります（メディアアセットのインポート用にwebpackが構成されていると仮定）。

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

/* ... */

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