小编Vla*_*lev的帖子

Webpack:从内联样式加载图像(背景图像)

我在使用 webpack 加载图像时遇到问题。

当我在 html 页面上使用图像标签时,一切正常:

 <img src="../../content/images/logo.png">
Run Code Online (Sandbox Code Playgroud)

但我也需要使用内联样式:

<div style="background-image: url('../../content/images/logo.png')">
Run Code Online (Sandbox Code Playgroud)

在这种情况下,webpack 不会解析图像并将字符串留在 url()原样中。

网络包配置:

        module: {
        rules: [
            { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
            {
                test: /\.ts$/,
                loaders: [
                    'angular2-template-loader',
                    'awesome-typescript-loader'
                ],
                exclude: ['node_modules/generator-jhipster']
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    minimize: true,
                    caseSensitive: true,
                    removeAttributeQuotes:false,
                    minifyJS:false,
                    minifyCSS:false
                },
                exclude: ['./src/main/webapp/index.html']
            },
            {
                test: /\.scss$/,
                loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
                exclude: /(vendor\.scss|global\.scss)/
            },
            {
                test: /(vendor\.scss|global\.scss)/,
                loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', …
Run Code Online (Sandbox Code Playgroud)

javascript webpack webpack-html-loader webpack-2

4
推荐指数
1
解决办法
4250
查看次数