Webpack别名与<img> src以及file-loader不复制图像文件

Question

我遇到了一个问题，即file-loader不能复制使用resolve.alias的图像。

一个例子:

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

resolve.alias是什么：

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

文件加载器（file-loader）是：

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

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

大家有什么想法吗？

谢谢。

- Darren Keen.

---

Webpack是一个构建步骤，所以你不能使用“别名”并期望它在运行时与变量一起工作，遗憾的是。 - Tholle

真遗憾。我想我需要处理可怕的 ../../。 - Darren Keen.

Answer 1

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

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

...

<img src={myImage} />

- peetya

---

这些图像可能是动态的，因此导入无法起作用。我尝试了require，但如果图像不存在，则会使应用程序崩溃（这可能会发生）。使用try catch也不能使用require中的变量，原因不明。 - Darren Keen.

你可以尝试使用动态导入：https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import - peetya

Answer 2

请尝试这个，它对我有效。

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

- Yisen