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

标签 javascript reactjs webpack resolve webpack-file-loader

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

有人有什么想法吗?

谢谢。

最佳答案

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

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

...

<img src={myImage} />

关于javascript - Webpack 别名与 <img> src 和文件加载器不复制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51765029/

相关文章:

reactjs - Docker 创建 react 应用程序热重载不起作用

reactjs - 如何从 reducer 返回一个数组?

javascript - 如何在同一个类名上添加不同的ID?

javascript - 如何摆脱 TableBody 中的表格单元格?

javascript - 用户滚动后触发 jquery .animate

javascript - 为什么开发模式下的 ReactJS 包大小比生产模式小?

typescript - Webpack 4 - typescript 入口文件

javascript - 单击所有包含 "Follow"的按钮

javascript - EventEmitter 与 facebook 的调度程序

webpack - 自定义 Ant Design 的主题 : what exactly is that 'hack' key in the 'modifyVars' option of less-loader?