Question

我使用webpack for react.js但是加载静态图片时遇到问题。在我的react组件中，我尝试从例如mainContainer.js文件加载图像。我尝试使用文件加载器，我认为我设置正确，但仍然没有webpack识别图像文件夹。

此处是指向Github的内联链接。

部分来自我的.js组件，我试图加载图片：

<a href="/" className="author">
    <span className="name">Jane Doe</span><img src="./images/avatar.jpg" alt="" />
</a>

和webpack配置文件的一部分：

module.exports = {
    entry: './src/scripts/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // publicPath: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015']
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: extractPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(jpg|png)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: 'images/'
                        }
                    }
                ]
            },
            {
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                use: 'url-loader'
            }
        ]
    },
    plugins: [
        extractPlugin,
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
        // new CleanWebpackPlugin(['dist'])
    ]
};

Answer 1

我这样做的方法是使用CopyWebpackPlugin将所有静态图像复制到build文件夹中。然后在我的组件中，我可以引用它们，就像它们存在于根级别一样：

const copy = new CopyWebpackPlugin([
    { from: ROOT + '/images', to: 'images' }
]);

在您的组件中：

<img src="/images/logo.png" />

反应 - 加载静态图像

1 个答案: