Load images in React using webpack loader

Question

I am unable to display images within a React component. After many trials (attempted this, this, this, this, this, this, this and this) and only errors, I am requesting for help. I'm in the development build (not production build).

I still get this error:

Module parse failed: /project/src/images/net.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Component

import thumbnail from '../images/net.png';

<img src={thumbnail}/>

Webpack config:

devtool: 'cheap-module-eval-source-map',
entry: [
    'eventsource-polyfill',
    'webpack-hot-middleware/client',
    './src/index'
],
target: 'web',
output: {
    path: path.resolve(__dirname, 'dist'),
    task `npm run build`.
    publicPath: 'http://localhost:3000/',
    filename: 'bundle.js'
},
devServer: {
    contentBase: './src'
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()],
module: {
    rules: [
        {
            test: /\.js$/,
            include: path.join(__dirname, 'src'),
            loader: 'babel-loader'
        },
        {
            test: /(\.css)$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: { sourcemap: true }
                }
            ]
        },
        {
            test: /\.(svg|png|jpg|jpeg|gif)$/,
            include: './src/images',
            use: {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    outputPath: paths.build
                }
            }
        }
    ]
}

Directory Structure

Project
-- src
-----components
-----images
-----index.js

How can I display the image ?

Sample code here: githublink See /src/components/home/HomePage.js

What can I do to see the image on the home page ?

score 0 · Answer 1 · answered Jul 18 '18 at 08:36

0

Have you tried this webpack configuration

{ test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }

answered Jul 18 '18 at 08:36

Serdar

478
3
11

then will you try please changing your image to another one to be sure that the image is not damaged or corrupted. – Serdar Jul 18 '18 at 08:49
I think something with your dev environment. Have you tried to clear the cache . Or use image with different format not png. – Serdar Jul 18 '18 at 09:12

score 0 · Answer 2 · answered Jul 18 '18 at 08:49

0

I am using url-loader instead.

  {
    test: /\.(png|jpg)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 25000 // Max file size = 25kb
      }
    }
  }

I am not sure. But, I think you should install it first as devDependencies e.g. yarn add -D url-loader.

answered Jul 18 '18 at 08:49

Ukasha

2,238
3
21
30

I'd already installed it and I tried. Still seem to get the same error. – Kaya Toast Jul 18 '18 at 09:01

score 0 · Answer 3 · answered Jul 18 '18 at 09:01

0

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

Try using this with your file-loader loader. notice the (?.*$|$) instead of a plain $.

answered Jul 18 '18 at 09:01

Roopak Puthenveettil

1,387
2
13
27

Tried it, as you said, with file-loader. Still the same error. – Kaya Toast Jul 18 '18 at 09:04

Jun Bin · Answer 4 · 2018-07-20T02:25:04.680

0

{ test: /.(png|jp(e*)g|svg|gif)$/, use:[{ loader: 'url-loader?limit=8192' }] }

I loaded png with url-loader instead inside webpack. You need to rebuild webpack as well.

edited Jul 20 '18 at 02:25

answered Jul 18 '18 at 10:13

Jun Bin

82
6

Please add an explanation. – Rekshino Jul 18 '18 at 12:24

Load images in React using webpack loader

4 Answers4