发表新帖
发表新帖

Webpack - background images not loading

后端 未结
关注
8 1827
渐次进展
渐次进展 2020-12-09 15:34

I\'m fairly new to webpack but having some problems with css-loader or file-loader.

I\'m trying to load a background-image but it doesn\'t work quite right. The bac

相关标签:
8条回答
  • 渐次进展
    2020-12-09 15:45

    It seems like browsers aren't fond of relative paths to background images on the body tag. (see also CSS Background image not loading and css background-image not working properly)

    Changing the code slightly seemed to do the trick:

    • change the URL to an absolute URL: background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg). This is hardly ideal.
    • add a class to body, and change the styles to reference this class:
    <body class="foo">

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

    Neither of these solve the real question, but do get you unstuck.

    0 讨论(0)
  • 天涯浪人
    2020-12-09 15:50

    You can also try using the ~ in front of your files so that the webpack falls back to the loaders require to resolve the url.

    background-url: (~assets/image/myimagefile);
    0 讨论(0)
  • 说谎
    2020-12-09 15:51

    When having problems using img inside react you have to check your directory structure, is common to make a mistake calling a route that points to a parent directory.

    eg: if you have this structure

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

    if you try to use the below code inside index.js it will fail:

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

    but if you are aware of the folder structure and use the [../] as shown in the code below to navigate to a outer folder I think it will work as it worked for me.

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

    this problem happens many times when using relative routes, try [../] in your route until you position yourself on the proper level in your project directory structure and then just go to the directory you want using the proper route.

    0 讨论(0)
  • 日久生厌
    2020-12-09 15:55

    After struggling with this problem for a day, I finally figured out how to rewrite urls within css using postcss

    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/');
        })
    ]
};
    0 讨论(0)
  • 遥遥无期
    2020-12-09 15:56

    Where is your publicPath entry in output? eg:

    publicPath: 'http://localhost:5000/', // absolute path req here for images in css to work with sourcemaps on. Must be actual numeric ip to access on lan.

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

    0 讨论(0)
  • 悲哀的现实
    2020-12-09 15:59

    There is currently a bug when using sourceMap with css-loader. Removing sourceMap from your css loader should fix it.

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

    Issue is related to: https://github.com/webpack/css-loader/issues/296

    0 讨论(0)
 看不清?
提交回复
热议问题