内联背景图片未与Webpack 4一起显示

时间:2019-08-16 10:30:04

标签: javascript webpack

我希望能够通过webpack显示嵌入式背景图像,但到目前为止,它无法正常工作。在我的 index.html 中,我有 img标记,它们可以在浏览器中正确显示。但是,它不适用于 background-image

我还对此链接Webpack: load images from inline style (background-image)中提到的带有插值标志的镜头进行了测试,但是问题仍然存在。

这是我的代码,请您给我一些建议以解决此问题?预先感谢。

index.html

<section class="intro pt-sm-5 pb-5" style="background-image: url(./assets/img/showcase/header-intro-bg.jpg)">

</section>

webpack配置

const path = require('path');
const common = require('./webpack.common');
const merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/template.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                        // options: {
                        //  sourceMap: true
                        // }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            data: '@import "./src/scss/variables";',
                            includePaths: [path.resolve(__dirname, 'src/scss')]
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        include: path.resolve(__dirname, './src/assets/img'),
                        name: '[name].[hash].[ext]',
                        outputPath: 'imgs'
                    }
                }
            }
        ]
    }
});

0 个答案:

没有答案