使用webpack在react中的导入css文件中包含一个图像

Question

好吧，所以我一直在阅读一篇又一篇的文章，还没有找到一个好的解决方案，开发web应用程序应该是一个非常简单的过程。。。

我有我的webpack，babel，react的设置，在我的react应用程序中，我有一个非常基本的css导入。我已经导入了这个图像，它位于src/static/assets/images/bg.png中，我可以使用内联css将它嵌入到我的react组件中，而不会遇到任何问题。然而，我想包括我的图像从一个包含的css文件。css文件被解析，但随后我得到错误"模块构建失败"one_answers"无法解析"/"bg.png"或一个非常类似的路径错误，当我在所包含的css中处理路径时。我安装了文件加载程序和url加载程序，并将文件移动到dist/文件夹路径中(尽管老实说，我宁愿在dist中有一个图像/文件夹，但这是另一项任务。

所以问题是：需要改变什么才能从css中包含图像。我读过https://create-react-app.dev/docs/adding-images-fonts-and-files/这暗示了我的代码应该工作，但它没有。

代码在下面，如果你想要整个代码库，可以从我的回购中获取：https://github.com/abendago/reactimages

REACT代码

import React from "react";
import './css/style.css'
import bg from './static/assets/images/bg.png'
function App() {
return (
<h1 style={{backgroundImage: "url(" + bg + ")"}}>In THe App Here</h1>
);
}
export default App;

src/css/style.css

body { background-image: url(./bg.png)}

webpack配置

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
},
],
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin()
],
devServer: {
contentBase: path.join(__dirname, 'public')
}
};

Answer 1

您必须设置图像的相对路径来解决您的问题，因为当前的路径与任何东西都无关：

body { background-image: url('../static/assets/images/bg.png')}

Answer 2

您可能需要安装文件加载器和映像webpackloader并更新您的webpack配置以反映以下内容。

{
test: /.(png|gif|jpe?g)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpege: {
progressive: true,
quality: 80,
},
optipng: {
enabled: false,
},
pngquant:{
quality: '65-90',
speed: 4,
},
}
}
]
}

虽然我认为你的图片在css中引用时不会加载，因为它周围没有引号。将body｛background image:url(./bg.png(｝替换为body｛backbackground images:url('./bg.png'(｝-https://developer.mozilla.org/en-US/docs/Web/CSS/background-image