Reactコンポーネントに画像のパスを渡して描画したい

Question

前提・実現したいこと

画像のパスを Props に渡して background-image として表示したい

発生している問題

画像が読み込めない

該当のソースコード

webpack5 の inline assets を使っています。

module.exports = {
  module: {
    rules: [
      {
        test: /.(ico|svg|jpg|png|webp)$/,
        type: 'asset/inline'
      }
    ]
  }
};

該当するコンポーネントは以下の通りです。

//<project-root>/src/components/Button/Button.tsx
import styled from 'styled-components';

interface Props {
  imgUrl?: string;
}

const Button = styled.button<Props>`
  background-image: url(${(props) => props.imgUrl || ''});
  background-repeat: no-repeat;
`;

コンポーネントを使う側は以下のようになっています。
また、画像そのもの(edit.svg)は、プロジェクトルート下のassets/images/に置いてあります。

// Button.tsx と同じディレクトリに配置
const Edit: React.VFC = () => (
  <Button imgUrl={'../../../assets/images/edit.svg'} />
);

何が問題であり、どのように解決できますでしょうか？

Comments

[maisumakun]

ブラウザコンソールにエラーは出ていませんか？

[退会済みユーザー]

コンソールには 404 が出ています。

コピーしようとするとメッセージが変わってしまいますが、一応目視で確認できる部分は記載しておきます。
目視：GET http://localhost:6006/assets/im iframe.html?id=butto...it&viewMode=story:1
ages/edit.svg 404 (Not Found)
コピーした結果：GET http://localhost:6006/assets/images/edit.svg 404 (Not Found)

[退会済みユーザー]

使う側が Storybook であることは何か関係ありますでしょうか？

Answer 1

npm script の storybook を "start-storybook -s ./public -p 6006"とすることで解決しました。
-s で静的ファイルのディレクトリを指定する必要があったようです