javascript - Webpack 内联 CSS 背景图片

Question

我正在尝试让 webpack 加载图像，但似乎无法正常工作。我的配置如下所示:

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    publicPath: "/build/",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: APP_DIR,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader : 'url-loader'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

我正在尝试像这样用作内联 CSS 背景图片:

<div class="inner-panel"
     style="background-image: url("/common/img/split-image/image.jpg");">
</div>

它也不能用作内联图像:

<img src="/common/img/split-image/image.jpg">

Answer 1

问题出在你的图片路径上，而不是你的 webpack 配置上。

尝试像这样在路径的开头放置一个 ./

"./common/img/split-image/image.jpg"

除此之外，您还应该查看您的文件需求，并确保将它们放置在您想要放置的位置。

由于您正在使用文件加载器(我认为 React 也是如此)，您将如何使用它的示例如下:

//CJS
var file = require("file!./file.png");
//ES6
import file from "file!./file.png";

//Later inside a React component
    const inStyle = {
        background-image: 'url(' + file + ')'
    }
    <div style={inStyle}/>

(React 使用对象而不是字符串作为样式属性)

url-loader 应该是一样的。希望这会有所帮助。