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} > </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属性。
答
当您使用backgroundImage: 'url(./assets/introleft.png)'
时,它将按原样插入(它只是一个字符串),因此您的url-loader
将不会应用于它。相反,你应该导入图像:
import introleft from './assets/introleft.png';
的WebPack将已经应用了url-loader
和你回来无论是传输数据的URL或URL所提取的图像,如果尺寸过大。您现在需要做的就是将该URL放入您的backgroundImage
:
backgroundImage: `url(${introleft})`