React + Grails image loading

Question

Я пытаюсь создать приложение grails с React в качестве интерфейса. Однако есть проблема с загрузкой изображения. Я попробовал несколько вещей, и сначала изображение не загрузилось вообще. Я также попытался подключиться к картине в Интернете, и она работает по назначению.

Теперь я получаю эту ошибку:

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 install --save-dev file-loader 

Кроме того, вы должны изменить webpack.config.js так WebPack может распознать загрузчик. Вот пример:

(Вы также можете добавить опции к загрузчику с помощью query См webpack documentation for query parameters..)

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

Затем в файле component.js, импорт должен заканчиваться расширением:

import ProcessImg from './example.png';