我正在创建一个类似横幅的组件,并将图像设置为组件的背景,但我无法让它工作。我尝试了网上发布的不同建议,但没有成功,目前我不确定我的错误是否在 react 代码中,或者是 webpack 没有正确加载文件。
这是我的文件结构:
AppFolder
- client/
-- components/
-- data/
-- images/
----- banners/
------- frontPageBanner2.png
-------
-- styles/
-- myApp.js
-- store.js
---------
- index.html
- package.json
- webpack.config.dev.js
这是我的 webpack 配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/myApp'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
// js
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel'],
presets: ['es2015', 'react'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.scss$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!sass-loader'
},
// PNG
{
test: /\.(jpg|png)$/,
loader: "url-loader?limit=25000",
//loader: 'file?name=[path][name].[ext]',
include: path.join(__dirname, 'client')
},
// FontAwesome
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: path.join(__dirname, 'client/images'),
loader: "file-loader" },
// other SVG
{ test: /\.svg$/,
loader: 'url-loader',
query: { mimetype: "image/svg+xml" },
include: path.join(__dirname, 'client/images')
},
]
}
};
这是我在应用程序中使用它的方式:
export class Banner extends React.Component {
render() {
console.log(this.props.banners);
// = '../images/banners/frontPageBanner.png'
const bannerImg = this.props.image.backgroundImage;
var bannerStyle = {
background: 'url(' + bannerImg + ')',
backgroundSize: this.props.image.backgroundSize,
backgroundPosition: this.props.image.backgroundPosition,
}
return (
<section key={this.props.key} className="container hero" style={bannerStyle}>
<div className="textbox">
<h2>{this.props.title}</h2>
</div>
</section>
)
}
}
这是生成的 html:
<section class="container hero" style="background: url('../images/banners/frontPageBanner2.png') 100% 100% / contain;">
...
</section>
但没有显示图像。另外打开图像 src 链接仅显示一个空白屏幕。为什么?我该如何解决它?
最佳答案
您应该传递一个 var,它是请求图像的结果,当您使用 webpack 请求它时,它将生成一个 base64 内联图像,而不是相对路径。
var DuckImage = require('./Duck.jpg');
var bannerStyle = {
backgroundImage: 'url(' + DuckImage + ')',
backgroundSize: this.props.image.backgroundSize,
backgroundPosition: this.props.image.backgroundPosition,
}
关于image - React 和 Webpack : Loading and displaying images as background-image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37386901/