在 css 中与 webpack 一起使用的图像 url/路径？答案

【问题标题】：image url/path to use with webpack in css?在 css 中与 webpack 一起使用的图像 url/路径？
【发布时间】：2016-08-16 09:20:26
【问题描述】：

我正在使用 react 和 webpack 开发一个项目。我正在使用图像的 url 加载器插件。如果我想将图像包含在 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 可以。如何在不使用整个 url 的情况下将图像用作背景 url？这是我的 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 的新手，我看过其他类似的问题，但没有运气，如果感觉有人问这个问题，我很抱歉

【问题讨论】：

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

标签： webpack

【解决方案1】：

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

解决这个问题的方法很少：

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

【讨论】：