1

我正在使用 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通过道具传递）：

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

但是当我为 prod 构建时，因为不需要图像并且 url 保持像 src/assets/photos/people/' 他们显然不会显示

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

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

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

谢谢。

4

0 回答 0