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接受对象而不是style属性的字符串）

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

Webpack内联CSS背景图像

1 个答案: