Question

在这种情况下，我试图设置一些高阶组件，并进一步为它实现“动态”图像加载。你能否解释为了引用组件内部所做的错误。

反应组件

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。因此，如果反应路由器以某种方式影响 webpack publicPath 属性，则反应路由器使用哈希历史记录/＃，wounder。

Answer 1

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

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

Webpack将应用url-loader，如果大小过大，您将获取数据URL或提取图像的URL。您现在需要做的就是将该网址放入backgroundImage：

backgroundImage: `url(${introleft})`

Webpack＆amp;反应。加载的图像无法解析路径404

1 个答案: