Webpack - 背景图片无法加载

Question

Webpack - 背景图片无法加载

webpackwebpack-dev-servercss-loader

37

我对webpack还比较新，使用css-loader或file-loader时遇到一些问题。

我试图加载背景图片，但它显示不正确。即使开发工具中显示了background-image样式，背景图片也没有显示出来。

如果我将background-image样式复制到element.style块中，一切都能正常工作。我是不是做了什么愚蠢的错误？

body标签应该有一个背景图片。样式出现在开发工具中，也没有任何错误：

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

如果我手动将css行复制粘贴到DevTools的element.style中，一切都能正常工作：

这发生在使用webpack-dev-server或只使用webpack打包时，在Chrome和Firefox中都出现。

其他样式，如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'
    }
};

- Eric

你最终找到解决方案了吗？我也遇到了完全相同的问题。 - user533507

9个回答

5

似乎浏览器不喜欢在body标签中使用相对路径来设置背景图像。（参见CSS背景图像未加载和css背景图像未正常工作）。

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

将URL更改为绝对URL: background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg)。这几乎不是理想的方案。
在body中添加一个类，并更改样式以引用此类：

<body class="foo">

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

这两种方法都不能解决真正的问题，但可以让你摆脱困境。

- robrich

1

谢谢Rob！绝对URL确实解决了问题，但是在我的环境中添加一个类到body并不起作用。此外，这个问题不仅限于<body>，当尝试将background-image应用到<div>或任何其他元素时也会发生。再次感谢！ - Eric

4

经过几个小时的尝试，我最终决定将css-loader降级。

npm install css-loader@4.3.0

- João Pimentel Ferreira

这是一个不错的快速解决方案。目前似乎在4.3和5.0之间有一些不同之处，这些差异至今仍然让我无法理解。 - FoxMulder900

@FoxMulder900 是的，根据语义化版本规范，这是一个破坏性变更。 - João Pimentel Ferreira

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

- James McGuigan

2

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

publicPath: 'http://localhost:5000/', // 这里需要绝对路径以使css中的图像与sourcemaps一起工作。必须是实际的数字IP才能在局域网上访问。

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

- Dan Brown

2

Webpack通过使用 URL生成CSS和标签，这似乎会导致加载背景图像时出现问题。 开发环境的解决方法
在开发中通过file-loader的方式内联图片(在CSS中生成大的base64字符串)
但允许热重载。 生产环境的解决方法
使用ExtractTextPlugin将CSS作为普通文件提供。

- Bob Fanger

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}

- Daniel Rocha

0

你也可以尝试在文件名前面加上~，这样webpack会回退到require加载器来解析URL。

background-url: (~assets/image/myimagefile);

- Nico

-1

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

例如：如果您有以下结构

-public
--images
---testImage.jpg
-components
--home
---index.js

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

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

但是，如果您了解文件夹结构并像下面的代码中所示使用[../]来导航到外部文件夹，我认为它会像对我一样有效。

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

使用相对路径时，这个问题经常会发生。尝试在您的路径中加入 [../] 直到您定位到项目目录结构的适当级别，然后使用正确的路径进入您想要去的目录。

- Carlos G

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sonny · Accepted Answer

目前在使用css-loader时，使用sourceMap会出现bug。将css loader中的sourceMap移除可解决问题。

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

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