React + Grails image loading

Question

I'm trying to create a grails app with React as a frontend. There's a problem with loading an image though. I tried a few things and at first the image wouldn't load at all. I also tried linking to a picture on the internet and it works as intended.

Now I'm getting this error:

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

This is my 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']
        }
      }
    ]
  }
}

This is my 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

It isn't working because you are not using webpack file-loader . You need to install it using npm like this:

npm install --save-dev file-loader

Also, you need to modify the webpack.config.js so webpack can recognize the loader. Here is an example:

(You can also add options to the loader using query . See webpack documentation for query parameters .)

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

Then in your component.js file, the import needs to end with extension:

import ProcessImg from './example.png';