Reactjs 如何使用相对路径为使用webpack的网站加载图像？

我正试图建立一个公文包网站进行部署，但在设置它时遇到了一些困难，这样我就可以从项目目录中获取相对于.scss文件和项目中各种.js文件的图像。我不擅长webpack，我按照样板设置使它工作，但并没有真正学会它。为了让图像正常工作，我必须绝对从我电脑上的位置提取它们。当我尝试部署它时，这将不起作用，对吗

我需要在我的scss文件（url（“”））中实现一个背景图像，并在名为Portfolio Piece的react组件中实现许多图像

我确实安装了解析url加载器和sass加载器。这是我的网页配置

var webpack = require('webpack');
var path = require('path');


var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      { test: /\.scss$/, loaders: ["style", "css", "sass", 'resolve-url','sass?sourceMap']},
      { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' },
      { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: /\.(jpg|png)$/, loader: "file-loader?name=[path][name].[ext]" }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
};

module.exports = config;

---

如果有人可以ELI5，那么使用webpack时的根是什么？相对路径从哪里来？index.js？index.html？

首先，

解析url加载程序必须位于配置中的
sass加载程序之前。您有两次sass加载程序：
sass
和
sass？sourceMap
。我会尝试将您的第一个加载程序更改为以下内容：（删除第一个sass）

在我的项目中，我喜欢在react组件上添加背景图像样式作为内联样式，并使用
require
语句。以下是一个例子：

var PortfolioPiece = React.createClass({
  render: function() {
    return (
      <div
        className="wrapper"
        style={{ backgroundImage: `url(${require('./my-img.png')})` }}
      > 
    );
  }
});

var PortfolioPiece=React.createClass({
render:function（）{
返回(
);
}
});

require（'./my img.png'）
调用将解析为该图像所在的url

旁注：在代码中混合了双撇号和单撇号。您应该选择其中一个。
首先，配置中的
解析url加载程序必须在
sass加载程序之前。您有两次sass加载程序：
sass
和
sass？sourceMap
。我会尝试将您的第一个加载程序更改为以下内容：（删除第一个sass）

在我的项目中，我喜欢在react组件上添加背景图像样式作为内联样式，并使用
require
语句。以下是一个例子：

var PortfolioPiece = React.createClass({
  render: function() {
    return (
      <div
        className="wrapper"
        style={{ backgroundImage: `url(${require('./my-img.png')})` }}
      > 
    );
  }
});

var PortfolioPiece=React.createClass({
render:function（）{
返回(
);
}
});

require（'./my img.png'）
调用将解析为该图像所在的url

旁注：在代码中混合了双撇号和单撇号。你应该坚持这样或那样