webpack kann das Bild nicht laden

Ich erstelle eine mobile App mit React + Material-ui und benutze webpack, um ein Paket zu erstellen, das es in index.html aufnimmt. i importieren Bild und es verwenden, reagieren in aber Bild nicht geladen und dieser Fehler erscheinen in der Konsole:webpack kann das Bild nicht laden

fehlgeschlagen Ressource laden: net :: ERR_FILE_NOT_FOUND

webpack Config;

module.exports = { 
    entry: { 
     index: path.join(__dirname, 'www', 'js', 'routing.jsx') 
    }, 
    output: { 
     path: BUILD_DIR, 
     filename: filename, 
     library: '[name]', 
     libraryTarget: 'umd', 
     umdNamedDefine: true, 
     publicPath: "/www/js/bundle/" 
    }, 
    node: {fs: "empty"}, 
    plugins: [], 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.(js|jsx)$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, { 
       test: /\.json$/, 
       loader: "json-loader" 
      }, { 
       test: /\.(png|gif|jpg|jpeg|svg|otf|ttf|eot|woff)$/, 
       loader: 'file-loader' 
      } 
     ], 
     noParse: [/dist\/ol\.js/, /dist\/jspdf.debug\.js/] 
    } 
};

Bildimport und Nutzung:

import img from '../img/thumbnail .png' 
<img src={map.thumbnail_url} onError={(e) => { 
            e.target.src = {img} 
           }}/>

srceenshot:

Quelle

2017-01-18 Anonymous

In der Dokumentation verwenden sie wie: 'var url = require (" file-loader!./File.png ");', vielleicht ist der ** file-loader! ** - Teil erforderlich. – Hosar

Es gibt zwei Teile zu Ihrem Problem. Versuchen Sie zuerst, '' '' '' statt in den Fehler, um zu überprüfen, ob das Bild tatsächlich geladen wird. Wenn es das richtige Bild zeigt, dann ist das Problem Einstellungen e.target.src = {img} was ist, was ich denke, könnte das Problem sein – jssridhar

Bild wird nicht geladen, aber es erscheint im Ausgabeordner @jssridhar –

-1

Ihre Import-Anweisung import img from '../img/thumbnail .png', gibt es einen Raum, bevor die Datei-Erweiterung. Versuchen Sie import img from '../img/thumbnail.png'

Quelle

2017-01-18 15:12:23

dies ist der korrekte Name der Datei, aber ich änderte den Namen, aber der gleiche Fehler erscheint –

webpack kann das Bild nicht laden

Antwort

Verwandte Themen