具有<img/> src和文件加载器的Webpack别名未复制映像

Question

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

一个例子：

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

resolve.alias是：

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

请尝试一下，它对我有用。

<img src="${require(`assets/images/image.jpg`)}"/>

Answer 2

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

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

...

<img src={myImage} />