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

在这种情况下，我试图设置排序的高阶组件，并进一步实现它的“动态”图像加载。你能解释一下为了引用组件内部而做错了什么吗？Webpack＆React。加载的图像无法解析路径404

阵营元器件

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使用哈希历史记录/＃，如果它影响webpackpublicPath属性。

来源

2017-03-04 volna

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

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

的WebPack将已经应用了url-loader和你回来无论是传输数据的URL或URL所提取的图像，如果尺寸过大。您现在需要做的就是将该URL放入您的backgroundImage：

backgroundImage: `url(${introleft})`

来源

2017-03-04 16:10:26

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

回答

相关问题