Javascript 网页包内嵌CSS背景图像

我正在尝试让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']
  }
};

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

我尝试将其用作内嵌CSS背景图像，如下所示：

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']
  }
};

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

此外，它不能作为内联图像使用：

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

---

问题在于图像路径，而不是网页配置

尝试在路径的开始处放置一个

/

，如下所示

"./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}/>

//CJS
var file=require（“file.//file.png”）；
//ES6
从“file.//file.png”导入文件；
//稍后在一个反应组件内
常数inStyle={
背景图像：“url（“+文件+”）”
}

（React为样式属性获取对象而不是字符串）

---

url加载程序应该相同。希望这能有所帮助。

谢谢，但我认为根本没有加载这些文件。如何配置所需的文件？我将使用有关文件加载器的更多信息修改我的注释。我必须删除该文件！从导入到让它工作，但它现在工作。非常感谢您的帮助@DogPawHat