[英]Webpack & React. Loaded image can't resolve path 404
At this case I am trying to set up sort of high-order component and further implement 'dynamic' image loads for it. 在这种情况下,我尝试设置某种高阶分量,并进一步为其实现“动态”图像加载。 Can you please explain what has been done wrong in order to reference to the inside the component.
您能解释一下为了参考组件内部而做错了什么。
React Component 反应组件
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);
Project structure 项目结构
Webpack config 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
],
};
PS: Project has no node.js
server, just wepback-dev
. PS:项目没有
node.js
服务器,只有wepback-dev
。 So react-router uses hash history /#, wounder if it somehow affects the webpack publicPath property. 因此,react-router使用哈希历史记录/#,如果它以某种方式影响webpack publicPath属性,则会使它更 受伤 。
When you're using backgroundImage: 'url(./assets/introleft.png)'
, this will be inserted as is (it's just a string), so your url-loader
won't be applied to it. 当您使用
backgroundImage: 'url(./assets/introleft.png)'
,它将按原样插入(这只是一个字符串),因此您的url-loader
将不会应用到它。 Instead you should import the image: 相反,您应该导入图像:
import introleft from './assets/introleft.png';
Webpack will have applied the url-loader
and you get back either the data URL or the URL to the extracted image, if the size was too big. Webpack将应用
url-loader
,如果大小太大,您将获取数据URL或提取图像的URL。 All you need to do now is put that URL into your backgroundImage
: 现在您需要做的就是将该URL放入您的
backgroundImage
:
backgroundImage: `url(${introleft})`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.