Question

我正在使用react和webpack开展项目。我正在使用url loader插件来处理图片。如果我想将图像包含在img标记中，这可以正常工作。但我想在我的CSS中包含一个图像作为背景图像。即

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 =*/
/*=============================================<<<<<*/

我已尝试使用resolve-url-loader提供here解决方案但我不认为我将resolve-url放在装载机的正确位置，因为我的装载略有不同他们的。 webpack的新手，我已经看过其他类似的问题而没有运气，如果这感觉就像被问到那样对不起

Answer 1

根据this issue，启用sourcemap后，它将使用blob为您网页上的css提供服务。这会导致问题，因为背景url()相对于css，因此在blob中找不到文件，因此无法渲染图像。

解决此问题的方法很少：

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

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

1 个答案: