使用reactjs和webpack加载图像

Question

I am having issues trying to render images onto the webpage after I bundle everything with webpack. Below is my webpack.config.js file

var path = require('path');

module.exports = {
    entry: './src/main/dashboardapp/src/index.js',
    devtool: 'sourcemaps',
    cache: true,
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        loaders: [
            { test: /\.woff2/, exclude: /(node_modules)/, loader: 'ignore-loader' },
            { test: /\.wof/, exclude: /(node_modules)/, loader: 'ignore-loader'},
            { test: /\.ttf/, exclude: /(node_modules)/, loader: 'ignore-loader'},
            { test: /\.svg/, exclude: /(node_modules)/, loader: 'ignore-loader'},
            { test: /\.eot/, exclude: /(node_modules)/, loader: 'ignore-loader'},

            { test: /\.png/, exclude: /(node_modules)/, loader: 'ignore-loader'},
            { test: /\.bmp/, exclude: /(node_modules)/, loader: 'ignore-loader'},
            { test: /\.ico/, exclude: /(node_modules)/, loader: 'ignore-loader'},
            { test: /\.png/, loader: 'file-loader' },
            { test: /\.bmp/, loader: 'file-loader' },
            { test: /\.ico/, loader: 'file-loader' },

            { test: /\.css$/,
                exclude: /(node_modules)/,
                loaders: ['style-loader', 'css-loader']
            },
            { 
                test: /\.css$/,
                    include:     
[path.resolve(__dirname, "src/main/dashboardapp/node_modules/react-table/")],
                    loaders: ['style-loader', 'css-loader']
            }, 

        }, 
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                cacheDirectory: true,
                presets: ['es2015', 'react'],
                plugins: ['transform-class-properties']
            }
        },
        {
                test: /\.(jpg|png|gif|svg|pdf|ico)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name]-[hash:8].[ext]'
                        },
                    },
                ]
            },
        ]
    }
};

here is where I am rendering the image inside of reactjs

<img alt="" src={require('.././images/GreenCheck.bmp')} />

Inside the inspector it looks like this

[object Object]

Right now the images folder is sitting one directory up and then going into images. Any help I would be greatly appreciated it.

Answer 1

You may want to consider importing your image separately. I would re-explain it but I think its easier to look here: how to import a picture in the same directory .

Hope this helps!

Answer 2

Try importing the image as a variable and use the variable in your render method.

import GreenCheck from '.././images/GreenCheck.bmp';

...
<img src={GreenCheck} />
...