Webpack 别名与 <img> src 和文件加载器不复制图像

Question

我遇到一个问题，文件加载器没有复制在图像 src 中使用resolve.alias 的图像。

一个例子：

<img src="assets/images/image.jpg"/>

解析别名是：

alias: {
  'assets': path.resolve(__dirname, 'client/assets'),
}

文件加载器是：

{ test: /\.(jpe?g|gif|png|svg)$/, loader: 'file-loader?name=assets/images/[name].[ext]' }

这是在 React/Redux 应用程序中。我知道我可以使用 require，但有些图像使用变量，如果该变量等于没有图像的值，则整个应用程序将因无法加载模块而崩溃。

有人有什么想法吗？

谢谢。

Answer 1

您应该导入图像文件，而不是对其路径进行硬编码：

import myImage from './assets/images/image.jpg';

...

<img src={myImage} />