Question

我在使用webpack捆绑所有内容后尝试将图像渲染到网页上时遇到问题。下面是我的webpack.config.js文件

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]'
                        },
                    },
                ]
            },
        ]
    }
};

这里是我在reactjs内部渲染图像的地方

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

检查员内部看起来像这样

[object Object]

现在，images文件夹位于一个目录中，然后进入图像。任何帮助，我将不胜感激。

Answer 1

您可能需要考虑单独导入图像。我会重新解释一下，但我觉得在这里看起来更容易： how to import a picture in the same directory

希望这有帮助！

Answer 2

尝试将图像作为变量导入，并在渲染方法中使用该变量。

使用reactjs和webpack加载图像

2 个答案: