在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和我已经看过其他类似的问题,没有运气,所以很抱歉,如果这感觉像它的问题
答
根据this issue,当sourcemap
启用时,它会使用blob来为您的页面上的css 。这将导致问题,因为背景url()
是相对于CSS,因此在BLOB它找不到该文件,因此不呈现图像。
它来解决此问题几个方面:
- 使用
DataUrl
,看到url-loader,设置相应limit
- 如果图像文件是大,你不希望使用数据网址,您可以将
output.publicPath
设置为您的网址。例如通常在本地开发模式下,http://localhost:3000/
。但是,这种解决方法并不完美,尤其是当您使用HTTPS时。你仍然可以写一些简单的代码来相应地调整这个值。
也许使用文件加载器而不是url加载器?根据https://github.com/webpack/css-loader,一切都应该开箱即用。 –