我有一个 reactjs/webpack 应用程序并尝试为 bodytag 设置背景图片：
body{
background: url("../images/some-background.jpg");
background-size:contain;
background-position:top;
background: cover;
}
然而，加载组件后，页面中不存在正文样式。但它显示在控制台中。有没有办法在主页中显示背景图像，同时在 webpack 加载的 CSS 文件中有 CSS 规则？这是因为 reactjs 做了一些我不知道的事情吗？
【问题讨论】：
您需要将图像存储在项目的 Public 文件夹中。您可以使用正斜杠/ 引用公用文件夹并从那里访问您的图像。
例如：
<img src="/background.jpg" />
你可以在 CSS 文件中做同样的事情：
.background {
background-image: url("/background.jpg");
}
【讨论】：
背景应该已经是一个字符串：
backgroundImage: "url(" + Background + ")"
你也可以使用 ES6 字符串模板：
backgroundImage: `url(${Background})`
你应该读一下这可能会有所帮助 -
https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/
【讨论】：
Here 是一个简单的 github 存储库，我创建用于将背景图像放入 body 标签。此示例没有在 webpack 配置中添加任何专门针对 css 的更改/插件。
在您的代码中，如果您的存储库结构与我的相似，则可能是路径问题。 希望这能解决您的疑问。
【讨论】：
您需要将图像存储在项目的 src 文件夹中。您可以使用“./”引用您的 css 文件中的图像，该文件也应该在 src 文件夹中
例如： 您在此目录中的图像“src/images/background.jpg”
然后您可以通过以下方式在您的 css 文件（位于“src”文件夹中）中引用它：
.background {
background-image: url("./images/background.jpg");
}
【讨论】：
我一直在让 webpack 正确加载背景图像时遇到问题。
也许它在 webpack 2 中已修复，但我还没有使用它。我已经退回到使用copy-webpack-plugin 将图像复制到目录，然后在 CSS 中引用该位置。
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' }
])
【讨论】：
CSS：
.Logo { background-image: url(./logo.png); }
反应：
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() { // Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
【讨论】：
你需要把图片文件放到public文件夹里，然后试试
background: url(./logo.jpg) no-repeat;
文件夹结构如下
公开 -- logo.jpg
【讨论】：
纯 ReactJS 和内联 CSS
如果您正在寻找直接方法并在这种情况下使用local 文件。
试试
import Image from "../../assets/image.png"
<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
>Background Image
</div>
这是带有内联样式的ReactJS 的情况，其中Image 是您必须使用路径导入的本地文件。
【讨论】：
因为你使用的是 webpack，你可以在css or scss files 中写你的样式表。这意味着您将在您的 app.js 中导入它。所以当你在开发环境中时，webpack 将使用sass-loader or css-loader 来打包你的 css 文件。
所以它不会立即工作，浏览器会先加载你的 bundle.js，执行 js 文件，生成样式表并将它们插入到 header 中。
如果你想立即工作，你应该在你的 html 文件中写你的样式表。
请记住，加载背景图片也需要一些时间。
【讨论】：
通过反复试验发现了这一点。关键是引用自动调整尺寸大小的标签的高度和宽度属性标签。
反应
import React from "react";
import backgroundFinalStyle from "../../style/styled-css/background-style";
import i from "../../assets/media/calendar.jpg";
const StillBackground = (props) => {
const FullscreenVideoWrap = backgroundFinalStyle.fullscreenVideoWrap;
const ImgFull = backgroundFinalStyle.imageFull;
return (
<FullscreenVideoWrap>
<ImgFull>
<img height="100%" width="100%" src={i}></img>
</ImgFull>
</FullscreenVideoWrap>
);
};
export default StillBackground;
背景样式.js
import styled from "styled-components";
const FullscreenVideoWrap = styled.div`
position: absolute;
top: 0;
left: 0;
overflow: hidden;
min-width: 100%;
min-height: 100%;
`;
const ImgFull = styled.div`
position: absolute;
z-index: -100;
`;
const backgroundFinalStyle = {
fullscreenVideoWrap: { ...FullscreenVideoWrap },
imageFull: { ...ImgFull },
};
export default backgroundFinalStyle;
【讨论】：