Webpack-未加载背景图片

问题描述 投票：26回答：8

我对webpack相当陌生，但是css-loader或file-loader出现了一些问题。

我正在尝试加载背景图像，但是效果不佳。即使devtools显示background-image样式，也不会显示背景图像。

如果将background-image样式复制到element.style块，则一切正常。我在某个地方犯了一个愚蠢的错误吗？

body标签应具有背景图片。样式显示在开发人员工具中，没有错误：

“

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg，但是主体没有背景。

如果我在DevTools中手动将css行复制并粘贴到element.style，则一切正常：

“

[如果我在Chrome和Firefox中同时使用webpack-dev-server或仅使用webpack进行捆绑，就会发生这种情况。

[其他样式，例如body { background-color: red }也可以。

这是webpack.config.js：

const path = require('path');

module.exports = {
    "entry": [
        './src/index.js'
    ],
    "output": {
        "path": path.join(__dirname, 'build'),
        "filename": "bundle.js"
    },
    devtool: "source-map",
    "module": {
        "loaders": [
            {
                "test": /\.scss$/,
                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]
            },
            { 
                test: /\.jpg$/, 
                loader: "file-loader" 
            }
        ]
    },
    devServer: {
        contentBase: './build'
    }
};
webpack webpack-dev-server css-loader
8个回答
26
投票

当前将sourceMap与css-loader一起使用时，存在一个错误。从您的CSS加载程序中删除sourceMap应该可以解决它。

"module": {
    "loaders": [
        {
            "test": /\.scss$/,
            "loaders": ["style", "css", "sass?sourceMap"]
        },
        { 
            test: /\.jpg$/, 
            loader: "file-loader" 
        }
    ]
}

问题与：https://github.com/webpack/css-loader/issues/296

5
投票

似乎浏览器不喜欢body标签上背景图片的相对路径。 （另请参见CSS Background image not loading和css background-image not working properly）

稍微更改代码似乎可以解决问题：

  • 将URL更改为绝对URL：background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg)。这几乎不理想。
  • 将一个类添加到主体，并更改样式以引用该类：
<body class="foo">

.foo {
    background-image: url('../img/test.jpg');
}

这些都不能解决真正的问题，但确实会让您感到困惑。

3
投票

经过一天的努力，我终于想出了如何使用postcss重写CSS中的URL

webpack.config.js

const _ = require('lodash');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const argv = {
    verbose:    _.includes(process.argv, '-v') || _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
};
module.exports = {
    cache:   true,
    devtool: argv.production ? "source-maps" : "eval",
    output: {
        path: 'public/build',
        filename: '[name].js',
        publicPath: "/build/",
        pathinfo: true // use with devtool: "eval",
    },
    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ].join('!')
            },
            {
                test: /\.css$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ].join('!')
            },
        ]
    }
}

postcss.config.js

const argv = {
    verbose:    _.includes(process.argv, '-v') || _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
};
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: [
                "> 5%",            // https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
                "last 2 versions", // http://caniuse.com/
            ]
        }),
        require('postcss-url-mapper')(function(url) {
            return argv.production ? url : url.replace(new RegExp('^/'), 'http://localhost:3000/');
        })
    ]
};
2
投票

Webpack通过<link> url生成css和blob: s，这似乎在加载背景图像时引起问题。

开发解决方法通过开发中的文件加载器内联图像（在CSS中创建大型base64字符串）但允许进行热重装。

生产解决方法使用ExtractTextPlugin将CSS作为普通文件使用。

2
投票

您的publicPath条目在输出中在哪里？例如：

publicPath：'http://localhost:5000/'，//绝对路径要求，此处的CSS中的图像可与Sourcemap一起使用。必须是实际的数字ip才能通过lan访问。

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

0
投票

例如，请尝试使用：

html {
   background: url(~/Public/img/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

webpack中的css-loader：

{
    test: /\.(css|eot|svg|ttf|woff|jpg|png)$/i,
    use: ExtractTextPlugin.extract({
        use: [{
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                minimize: true
            },
        }],
    }),
},

bundle.css中的结果是：

html{background:url(/Public/img/bg-picking.jpg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
0
投票

当在使用img时遇到问题时，您必须检查目录结构，通常会在调用指向父目录的路由时出错。

例如：如果您具有此结构

-公共 - 图片--- testImage.jpg-组件 - 家--- index.js

如果尝试在index.js中使用以下代码，它将失败：

{background : url('/public/images/testImage.jpg')}

但是如果您知道文件夹的结构并使用下面的代码中所示的[../]导航到外部文件夹，我认为它将对我有用。

{background : url('../public/images/testImage.jpg')}

使用相对路径时，会多次发生此问题，请在路径中尝试[../]，直到将自己放置在项目目录结构中的适当位置上，然后使用正确的路径转到所需的目录。

-1
投票

您也可以尝试在文件前使用~，以便使Webpack退回到加载程序require来解析URL。

background-url: (~assets/image/myimagefile);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.