reactjs - React.js gif 未加载

Question

我有一个常见的用例来在组件中加载微调器。这是我的文件夹结构。

src
 /components
  /table
   -Table.js
   -Spinner.js

我像这样导入微调器

 const spinner = require('./spinner.gif');

当我控制台日志微调器时，我得到了这个

并像这样在组件中调用它

<img src={spinner} alt='Data is loading...' />

但是 gif 图像没有加载。相反，我得到了替代文本。

我如何用 React 解决这个问题？

标签： reactjswebpack

Answer 1

我的回答遵循 webpack 上的文档

在您的文件夹中为图像加载器添加一个包 npm install --save-dev file-loader

然后更改您webpack.config.js或任何其他命名的配置文件，如下所示。

 const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ],
        },
        // Added below -----------
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader',
         ],
       },
       // Added above ---------------
      ],
    },
  };

然后你可以像往常一样导入图像

 import image from './image.gif';

或者

const image = require('./image.gif')