React + Grails画像読み込み

Question

私はリアクションをフロントエンドとしてgrailsアプリを作成しようとしています。画像の読み込みに問題があります。私はいくつかのことを試みましたが、最初は画像が全く読み込まれませんでした。私はまた、インターネット上の画像にリンクしようとしたが、それは意図したとおりに動作します。

今、私はこのエラーを取得しています：

Module parse failed: /Users/miggy/projects/brochure/src/main/js/process/example.png Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 
    at Parser.pp$4.raise (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2221:15) 
    at Parser.pp$7.getTokenFromCode (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2756:10) 
    at Parser.pp$7.readToken (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2477:17) 
    at Parser.pp$7.nextToken (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2468:15) 
    at Parser.parse (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:515:10) 
    at Object.parse (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:3098:39) 
    at Parser.parse (/Users/miggy/projects/brochure/node_modules/webpack/lib/Parser.js:902:15) 
    at NormalModule.<anonymous> (/Users/miggy/projects/brochure/node_modules/webpack/lib/NormalModule.js:104:16) 
    at NormalModule.onModuleBuild (/Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) 
    at nextLoader (/Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) 
    at /Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 
    at Storage.finished (/Users/miggy/projects/brochure/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) 
    at /Users/miggy/projects/brochure/node_modules/graceful-fs/graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:416:3) 
@ ./src/main/js/process/process-page.js 13:15-39 

これは私のwebpack.config.js次のとおりです。

const path = require('path') 
const webpack = require('webpack') 

module.exports = { 
    entry: { 
    index: './src/main/js/index.js' 
    }, 
    output: { 
    path: './grails-app/assets/javascripts', 
    publicPath: '/assets/', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'src/main/js'), 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
} 

これは私のcomponent.jsです：

import React, { Component } from 'react' 
import ProcessImg from './example.' 

class ProcessPage extends Component { 
    render() { 
    return (
     <div> 
     <div> 
      <img src={ ProcessImg } alt="boohoo" className="img-responsive"/> 
     </div> 
     Process 
     </div> 
    ) 
    } 
} 

export default ProcessPage; 

Answer 1

それはあなたので、動作していませんwebpack file-loaderを使用していません。あなたはこのようにNPMを使用して、それをインストールする必要があります。

npm install --save-dev file-loader 

はまた、あなたがローダーを認識することができますので、WebPACKのwebpack.config.jsを変更する必要があります。次に例を示します。

（あなたはまた、queryを使用して、ローダーにオプションを追加することができwebpack documentation for query parametersを参照してください。。）

loaders: [ 
    // babel loader 
    { test: /\.png$/, loader: 'file-loader' } 
] 

次に、あなたのcomponent.jsファイルに、インポートが拡張子で終わる必要があります：

import ProcessImg from './example.png';