使用 webpack 加载器在 React 中加载图像答案

【问题标题】：Load images in React using webpack loader使用 webpack 加载器在 React 中加载图像
【发布时间】：2018-12-26 01:47:23
【问题描述】：

我无法在 React 组件中显示图像。经过多次试验（尝试this、this、this、this、this、this、this 和this）并且只有错误，我请求帮助。我正在开发构建（不是生产构建）。

我仍然收到此错误：

Module parse failed: /project/src/images/net.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

组件

import thumbnail from '../images/net.png';

<img src={thumbnail}/>

Webpack 配置：

devtool: 'cheap-module-eval-source-map',
entry: [
    'eventsource-polyfill',
    'webpack-hot-middleware/client',
    './src/index'
],
target: 'web',
output: {
    path: path.resolve(__dirname, 'dist'),
    task `npm run build`.
    publicPath: 'http://localhost:3000/',
    filename: 'bundle.js'
},
devServer: {
    contentBase: './src'
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()],
module: {
    rules: [
        {
            test: /\.js$/,
            include: path.join(__dirname, 'src'),
            loader: 'babel-loader'
        },
        {
            test: /(\.css)$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: { sourcemap: true }
                }
            ]
        },
        {
            test: /\.(svg|png|jpg|jpeg|gif)$/,
            include: './src/images',
            use: {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    outputPath: paths.build
                }
            }
        }
    ]
}

目录结构

Project
-- src
-----components
-----images
-----index.js

如何显示图像？

此处的示例代码：githublink 见 /src/components/home/HomePage.js

我该怎么做才能看到主页上的图像？

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

{ 测试：/.(png|jp(e*)g|svg|gif)$/, 采用：[{ 加载器：'url-loader?limit=8192' }] }

我用 url-loader 加载了 png，而不是在 webpack 中。您还需要重新构建 webpack。

【讨论】：

请补充说明。

【解决方案2】：

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

尝试将其与您的 file-loader 加载程序一起使用。注意 (?.*$|$) 而不是普通的 $。

【讨论】：

如您所说，使用文件加载器进行了尝试。还是一样的错误。

【解决方案3】：

我改用url-loader。

  {
    test: /\.(png|jpg)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 25000 // Max file size = 25kb
      }
    }
  }

我不确定。但是，我认为您应该首先将其安装为devDependencies，例如yarn add -D url-loader.

【讨论】：

我已经安装了它，我试过了。似乎仍然出现同样的错误。

【解决方案4】：

你试过这个 webpack 配置了吗

{ test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }

【讨论】：

那么您是否可以尝试将您的图像更改为另一个图像以确保图像没有损坏或损坏。
我认为与您的开发环境有关。您是否尝试过清除缓存。或者使用不同格式的图片而不是 png。