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' 
     ] 
    } 
    ] 
},