Webpack 和 React。加载图像无法解析路径 404

Question

在这种情况下，我正在尝试设置某种高阶组件并进一步为它实现 'dynamic' 图像加载。能否请您解释一下哪里做错了，以便引用组件内部。

React 组件

class Slide extends Component {
  constructor(props) {
    super(props)
  }

  render () {

    let imageLeft = {
     backgroundImage: 'url(./assets/introleft.png)'
    }

    return (
      <div className={styles.someStyles}>
        <div className={styles.someStyles} style={imageLeft} >&nbsp;</div>
      </div>
    )
  }

}

... state

export default connect(mapStateToProps)(Slide);

项目结构

Webpack 配置

const path = require('path'),
      webpack = require('webpack'),
      HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server',  
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'), 
    publicPath: '/'
  },  
  context: path.resolve(__dirname, 'logic'), 
  devtool: 'inline-source-map',    
  devServer: {
    hot: true, 
    contentBase: path.resolve(__dirname, 'build'),
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader?modules',
          'postcss-loader',
        ],
      },{
        test: /\.png$/,
        use: { loader: 'url-loader', options: { limit: 15000 } },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-url-loader',
          options: {}
      }
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: './index.template.html'
    })<script> tag
  ],
};

P.S: 项目没有 node.js 服务器，只有 wepback-dev。所以 react-router 使用 hash history /#，如果它以某种方式影响 webpack publicPath 属性.

Answer 1

当您使用 backgroundImage: 'url(./assets/introleft.png)' 时，它将按原样插入（它只是一个字符串），因此您的 url-loader 不会应用于它。相反，您应该导入图像：

import introleft from './assets/introleft.png';

Webpack 将应用 url-loader 并且如果尺寸太大，您可以将数据 URL 或 URL 返回到提取的图像。您现在需要做的就是将 URL 放入您的 backgroundImage:

backgroundImage: `url(${introleft})`

Webpack 和 React。加载图像无法解析路径 404

Webpack & React. Loaded image can't resolve path 404

reactjs

webpack

webpack-2