React JS - Loading Image Issue

Question

I'm stuck with the loading image, I've been searched all the sources, and i don't find any answer of this. The code below it doesn't works

import goldImage from './../../../public/img/gold.png';

but when i'm write like this, it works:

const gold = '../../../public/img/gold.png';

Or if I'm importing the JPG file, it works:

import test from './../../../public/img/kaslie.jpg';

I'm also using Webpack 2, here is my code:

test: /\.(png|jpe?g|gif|svg)$/,
            use:[
                {
                loader: 'url-loader',
                options:{limit:40000,name:'[path][name].[ext]?[hash]'}
                },
                'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
            ]

I don't have any idea for this, why its only work for jpg file, but PNG file not work.

Answer 1

For images you should use:

const goldImage = require('./../../../public/img/gold.png');

<image src{goldImage} alt="" />

The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc.