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...
]

我有缩略图数组，完整图像数组和移动图像数组。

然后我映射数组并将它们用作背景图像或用在我的组件中的图像标记中（网址通过道具传递下来）：

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

但是当我为prod而构建时，因为不需要图像并且网址保持像src / assets / photos / people /＆＃39;他们显然不会被展示

所以我试着简单地要求它们：

<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]'
    }
  },

当我通过导入导入单个图像时，一切正常，但是当涉及到这个可观察时我被卡住了。我也尝试了上下文，但老实说，我并没有真正理解我在做什么，而且我认为我应该能够简单地要求我的图像进行映射。

感谢。

webpack + mobx + React：需要一个可观察的图像数组

0 个答案: