arrays - webpack + mobx + React : 観察可能な画像の配列が必要です

Question

次のようなギャラリーの画像の配列を保存するために mobX を使用しています。

@observable peopleThumb = [
'src/assets/photos/people/thumbs_1.jpg',
'src/assets/photos/people/thumbs_2.jpg',
'src/assets/photos/people/thumbs_3.jpg',
etc...
]

サムネイル配列、完全な画像配列、モバイル画像配列があります。

次に、配列をマッピングし、それらを背景画像として、またはコンポーネントの画像タグで使用します (URL は props を介して渡されます)。

<img src={url} />
or
background: `url(${url}) no-repeat center center`,

しかし、画像が必要なく、URL が src/assets/photos/people/' のままであるため、prod 用にビルドすると、それらは明らかに表示されません。

だから私は単にそれらを要求しようとしました:

<img src={require(url)}/>
and
background: `url(${require(url)}) no-repeat center center`

しかし、私はエラーが発生します:

Uncaught Error: Cannot find module 'src/assets/photos/people/full_3.jpg'.

ストア内のパスを相対パスに変更してみました:

@observable peopleThumb = [
'../assets/photos/people/thumbs_1.jpg',
'../assets/photos/people/thumbs_2.jpg',
'../assets/photos/people/thumbs_3.jpg',
etc...
]

そして同じエラー：

Uncaught Error: Cannot find module '../assets/photos/people/full_2.jpg'.

出力とファイル ローダーの webpack 構成:

  output: {
   path: "./build/",
   filename: 'static/js/[name].[chunkhash:8].js',
   chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js'
  },
  {
    test: /\.(jpg|png|svg)(\?.*)?$/,
    loader: 'file',
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  },

インポートを介して単一の画像をインポートすると、すべて正常に機能しますが、この観察可能物に関しては行き詰まります。また、require context も試しましたが、正直なところ、自分が何をしているのかよくわかりませんでした。一度マップした画像を単に request できるはずだと思います。

ありがとう。