Webpack图像加载器错误

Question

我在尝试导入图像到我的项目时遇到问题收到此错误时，建筑：模块解析失败：C：\ Users \ Angelo \ OptaService \ OptaService \ images \ ImageTest.png意外的字符' ' （1：0） 您可能需要一个合适的加载程序来处理此文件类型。

这是我的WebPack配置：

module: { 
    rules: [ 
     {test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/}, 
     {test: /\.css$/, use: ['style-loader', 'css-loader']}, 

    ], 
    loaders: [ { 
     test: /\.js|.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
    }, { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
      'file?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
    } ] 
}, 

我已经NPM安装图像的WebPack装载机和文件加载。 此外，我正在导入图像组件是这样的：

import image from './../../images/ImageTest.png'; 

...

<img className="img-fluid" src={image} alt="OptaService Logo"/> 

提前感谢！

Answer 1

这是我设置webpack配置的方式，您在混合装载程序和规则，您可以查看docs以进一步研究如何正确设置您的配置。

module: { 
    rules: [ 
    { 
     test: /\.js|.jsx?$/, 
     use: 'babel-loader', 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'] 
    }, 
    { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
     'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
    } 
    ] 
},