Question

曾经尝试使用Webpack构建MERN应用，并且似乎无法在React中加载任何图像。

反应组件渲染方法：

const logo = require('./images/sample.png');

<img src={logo}'/>

Webpack

module: {
loaders: [
  { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
  { test: /\.css$/, use: ['style-loader','css-loader']},
  {test: /\.(jpg|png|svg)$/, loader: 'url-loader'}
]  }

将bundle.js输出到src文件夹中，文件结构在下面

文件结构

app

| ...... src

......... |组件

................................... | component.js

......... |图像

....................... | sample.png

如何更改require中的路径并不重要，即使我将sample.png图像与component.js放在同一文件夹中，也会收到无法解决的错误。我认为这一定是webpack错误，但是无论我阅读了多少教程和论坛，我都无法解决。

理想情况下，我会动态加载图像，而不是像这样声明特定要求，因此，如果有更好的方法，请告诉我。

更新：

我将src={logo}更改为src={require("${logo}")}，并且不再收到服务器端错误。相反，我在开发人员控制台（使用Chrome）中收到一个错误，该错误似乎正在返回img URI（是否有问题？）：

未捕获的错误：找不到模块'data：image / png; base64 ...'

Answer 1

您需要web.config.js

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

并在此处添加

 module: {
    rules: [
      ...
      imageLoaderConfiguration,
      ...
    ],
  },

错误：无法解析'./images/sample.png'React Webpack

1 个答案: