Webpack Image Loader Fehler

Question

Ich habe Probleme beim Importieren von Bildern in mein Projekt mit dem Fehler beim Bulding: Modul Parsen fehlgeschlagen: C: \ Benutzer \ Angelo \ OptaService \ OptaService \ images \ ImageTest.png Unerwartetes Zeichen ' ' (1: 0) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten.

Dies ist meine webpack Konfiguration:

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

ich bereits Bild-webpack-loader und Datei-loader NPM installiert haben. Auch bin Import i die Bilder in der Komponente wie folgt aus:

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

...

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

Vielen Dank im Voraus!

Answer 1

Dies ist die Art, wie ich Ihre Webpack-Konfiguration einrichten würde, Sie mischen Lader und Regeln, können Sie die docs überprüfen, ein wenig weiter zu untersuchen, wie Sie Ihre Konfiguration richtig einrichten.

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