在css中使用webpack的图像url /路径？

我正在与一个反应和webpack项目。我为图像使用了url loader插件。如果我想将图像包含在img标签中，这工作正常。但我想在我的CSS中包含一个图像作为背景图像。即在css中使用webpack的图像url /路径？

const hero = require('../../images/landing-hero.jpg');

这将返回一个文件名，它在任何地方都能正常工作，除了我的css。

.hero { 
    background-image: url('3b1425242c422b429f78f272b0a4c0f7.jpg'); 
    background-size: cover; 
    position: relative; 
    display: block; 
    min-height: 101vh; 
    color: white; 
}

我已经尝试了一些没有成功的路径变体。但是做http://localhost:8080/3b1425242c422b429f78f272b0a4c0f7.jpg的作品。如何在不执行整个网址的情况下将图片用作背景网址？这是我的WebPack配置

'use strict'; 

/*=============================================>>>>> 
= MODULES = 
===============================================>>>>>*/ 

const path = require('path'); 
const webpack = require('webpack'); 
const WebpackNotifier = require('webpack-notifier'); 
// PostCSS 
const autoprefixer = require('autoprefixer'); 

'use strict'; 

/*=============================================>>>>> 
= MODULES = 
===============================================>>>>>*/ 

const path = require('path'); 
const webpack = require('webpack'); 
const WebpackNotifier = require('webpack-notifier'); 
// PostCSS 
const autoprefixer = require('autoprefixer'); 

/*= End of MODULES =*/ 
/*=============================================<<<<<*/ 

/*=============================================>>>>> 
= WEBPACK CONFIG = 
===============================================>>>>>*/ 

module.exports = { 
    entry: { 
    app: path.resolve(`${__dirname}/src/client/public/app/main.tsx`) 
    }, 
    output: { 
    path:  path.resolve(`${__dirname}/build/client`), 
    filename: 'public/zip/[name].bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.tsx$/, loader: 'babel!ts' }, 
     { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap' }, 
     { test: /\.css$/, loader: 'style!css?sourceMap!postcss'}, 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} 
    ] 
    }, 
    postcss: function() { 
    return [ autoprefixer ]; 
    }, 
    ts: { 
    silent: true 
    }, 
    plugins: [ 
    new WebpackNotifier({ title: 'Webpack', alwaysNotify: true }), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    ] 
}; 

/*= End of WEBPACK CONFIG =*/ 
/*=============================================<<<<<*/

我试着解决方案提供here与决心，网址加载器，但我不认为我把决心，网址在我的装载机合适的地方，因为我的是略不同于他们的。新的webpack和我已经看过其他类似的问题，没有运气，所以很抱歉，如果这感觉像它的问题

来源

2016-04-22 ceckenrode

也许使用文件加载器而不是url加载器？根据https://github.com/webpack/css-loader，一切都应该开箱即用。 –

根据this issue，当sourcemap启用时，它会使用blob来为您的页面上的css 。这将导致问题，因为背景url()是相对于CSS，因此在BLOB它找不到该文件，因此不呈现图像。

它来解决此问题几个方面：

使用DataUrl，看到url-loader，设置相应limit
如果图像文件是大，你不希望使用数据网址，您可以将output.publicPath设置为您的网址。例如通常在本地开发模式下，http://localhost:3000/。但是，这种解决方法并不完美，尤其是当您使用HTTPS时。你仍然可以写一些简单的代码来相应地调整这个值。

来源

2016-12-19 08:00:25 ChinKang

在css中使用webpack的图像url /路径？

回答

相关问题