您可能需要一個合適的加載程序來處理此文件類型上傳圖像文件

Question

我在react-babel-webpack中使用圖像文件。但它表明

ERROR in ./public/assets/scissors.png 
Module parse failed: /home/rohit/Desktop/game/public/assets/scissors.png 
Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 

tool.component.js

import React from 'react'; 
import Paper from '../../public/assets/paper.png'; 
import Rock from '../../public/assets/rock.png'; 

class Tools extends React.Component { 
    render(){ 
    return (
     <div> 
     <img src={Paper} name="Paper" onClick={this.select.bind(this)} className="game-icon" alt="logo" /> 
     <img src={Rock} name="Rock" onClick={this.select.bind(this)} className="game-icon" alt="logo" /> 
     </div> 
    ); 
    } 
}; 

export default Tools; 

webpack.config.dev.js

import path from 'path' 
import webpack from 'webpack'; 

export default { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    path.join(__dirname, '/client/index.js') 
    ], 
    output: { 
    path: '/', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'client'), 
     loaders: [ 'react-hot', 'babel' ] 
     }, 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     { test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 'file?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ]} 
    ] 
    }, 
    resolve: { 
    extentions: [ '', '.js', '.css' ] 
    } 
} 

Answer 1

添加 'png格式' 到一個錯誤擴展陣列：

resolve: { 
    extentions: [ '', '.js', '.css', '.png' ] 
}