PNG nicht laden bei Verwendung von Webpack

Question

Ich bin neu bei Webpack.

PNG-Dateien in meinem Projekt zu laden, sind gescheitert, Einige der SlickGrid Plugin verwendet url() Funktion PNG-Dateien zu laden, wie unten angegeben,

Aber ich folgende Fehler mich auf Browser-Konsole

Hier ist meine webpack Datei,

/* eslint-env node */ 

module.exports = { 
    context: __dirname + '/xyz/static', 
    entry: { 
    reactComponents: './bundle/components.js', 
    history: './js/history/index.js', 
    slickgrid: './bundle/slickgrid.js', 
    }, 
    output: { 
    libraryTarget: 'amd', 
    path: __dirname + '/xyz/static/js/generated', 
    filename: '[name].js', 
    }, 

    module: { 
    rules: [{ 
     test: /\.jsx?$/, 
     exclude: [/node_modules/, /vendor/], 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015', 'react'], 
     }, 
     }, 
    }, { 
     test: /\.css$/, 
     use: ['style-loader', 'raw-loader'], 
    }], 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
}; 

Bitte lassen Sie mich wissen, was mir hier fehlt.

Answer 1

Sie müssen Verwendung eines url-loader in Ihrem webpack Config machen Bilder zu laden wie

module: { 
    rules: [{ 
     test: /\.jsx?$/, 
     exclude: [/node_modules/, /vendor/], 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015', 'react'], 
     }, 
     }, 
    }, { 
     test: /\.css$/, 
     use: ['style-loader', 'raw-loader'], 
    },{ 
      test: /\.(jpe?g|png|gif|svg)$/, 
      use:['url-loader'] 
     }], 
    } 

und dann in Ihrem Code können Sie Bilder importieren wie

import img from 'path/to/image.png'; 

und sie als Quelle verwenden in der Bildmarke wie

<img src={img} />