带有 <img> src 和文件加载器的 Webpack 别名不复制图像答案

【问题标题】：Webpack alias with <img> src and file-loader not copying image带有 <img> src 和文件加载器的 Webpack 别名不复制图像
【发布时间】：2019-01-16 19:14:16
【问题描述】：

我有一个问题，文件加载器没有复制在图像 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 但有些图像使用变量，如果该变量等于没有图像的值，则整个应用程序将由于加载模块失败而崩溃。

有人有什么想法吗？

谢谢。

【问题讨论】：

Webpack 是一个构建步骤，因此遗憾的是，您不能使用 alias 并期望它在运行时使用变量。
真可惜。我需要处理可怕的../../我想！

标签： javascript reactjs webpack resolve webpack-file-loader

【解决方案1】：

你应该导入你的图像文件而不是硬编码它的路径：

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

...

<img src={myImage} />

【讨论】：

这些图像可以是动态的，因此导入不起作用。我已经尝试过要求，但是如果图像不存在（这可能发生），这会使应用程序崩溃。由于某种原因，使用 try catch 也不适用于 require 中的变量
你可以试试动态导入：babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

【解决方案2】：

请试试这个，它对我有用。

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

【讨论】：