React.js スタイル付きコンポーネントで画像をインポートし、div の背景として使用する質問する

2024-07-06 • tag-icon

reactjs styled-components

私はstyled-componentsを使用しており、次のように背景画像を設定しようとしています

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 (見つかりません) で応答しました

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

間違ってロードしていませんか?

言っておきますが、私はこの分野（Reactとstyled-components）に非常に不慣れです。

イメージは次の方法でインポートする必要があります (メディアアセットをインポートするように webpack が構成されていることを前提とします)。

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

/* ... */

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

おすすめ記事