Reactjs 背景图像不显示
我有这个webpack.config.js文件Reactjs 背景图像不显示,reactjs,webpack,Reactjs,Webpack,我有这个webpack.config.js文件 const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist/assets'), filename: 'bundle.js', }, devServer: { contentBase: path.resolve(__dirname,
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/assets/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {}
}]
},
],
},
};
我的react应用程序的文件结构如下:
dist
..assets
...bundle.js
..index.html
src
..components
..pages
..images
..App.js
..index.js
..style.css
我正在尝试使用css设置页面的背景图像
[page-selector]{
background: url('./images/someimage.jpg')
}
但它没有表现出来。我怀疑这是关于图像的相对路径或适当的加载程序及其选项,但我不知道它到底是什么以及如何解决它。我们将非常感谢您的帮助。提前感谢在浏览器中打开
index.html
文件,检查[页面选择器]
元素的样式,你在样式
面板上看到了什么?@chenxsan通过将以下规则添加到webpack.config.js文件{test://\(png | jpg | gif)$/,loader:'url loader',},
中,而不是添加文件加载器
解决了问题