CSS 如何在reactjs中设置背景图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44796786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a background image in reactjs?
提问by bier hier
I have a reactjs/webpack app and trying to set a background image for the bodytag:
我有一个 reactjs/webpack 应用程序并尝试为 bodytag 设置背景图像：
body{
background: url("../images/some-background.jpg");
background-size:contain;
background-position:top;
background: cover;
}
However after loading the components the body style is not present in the page.It shows up in the console though. Is there a way to display a background image in the main page whilst having the CSS rule in the CSS file that is loaded by webpack?Is this because reactjs does something I am not aware off?
但是，加载组件后，页面中不存在正文样式。尽管它会显示在控制台中。有没有办法在主页中显示背景图像，同时在 webpack 加载的 CSS 文件中使用 CSS 规则？这是因为 reactjs 做了一些我不知道的事情吗？
回答by Richard Bonneau
You need to store your images in the Publicfolder of your project. You can refer to the public folder using a forward slash /and access your images from there.
您需要将图像存储在项目的公共文件夹中。您可以使用正斜杠引用公共文件夹/并从那里访问您的图像。
For example:
例如：
<img src="/background.jpg" />
You can do the same in a CSS File:
您可以在 CSS 文件中执行相同操作：
.background {
background-image: url("/background.jpg");
}
回答by Stacy Chen
Background should be already a String:
背景应该已经是一个字符串：
backgroundImage: "url(" + Background + ")"
backgroundImage: "url(" + Background + ")"
You can also use ES6 string templates:
您还可以使用 ES6 字符串模板：
backgroundImage: `url(${Background})`
you should read this it might help -
你应该阅读这个它可能会有所帮助 -
https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/
https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/
回答by Upasana
Hereis a simple github repository, I have created for putting background image to body tag. This example does not have any changes/plugins added in webpack config specifically for css.
这是一个简单的 github 存储库，我创建用于将背景图像放入 body 标签。此示例没有在 webpack 配置中专门为 css 添加任何更改/插件。
In your code, if you have similar repository structure as mine then it could be a path issue. Hope this solves your query.
在您的代码中，如果您的存储库结构与我的相似，则可能是路径问题。希望这能解决您的疑问。
回答by genestd
I've consistently had problems getting webpack to properly load background images.
Maybe it's fixed in webpack 2, but I'm not using it yet. I have fallen back to using the copy-webpack-pluginto copy images to a directory, and then referencing that location in CSS.
我一直在让 webpack 正确加载背景图像时遇到问题。也许它已在 webpack 2 中修复，但我还没有使用它。我已经回退到使用copy-webpack-plugin将图像复制到目录，然后在 CSS 中引用该位置。
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' }
])
回答by chenkehxx
It's because you are using webpack, you may write your stylesheet in a css or scss files. it means that you will import it in your app.js. so webpack will use sass-loader or css-loaderto bundle your css files when you are in develop environment.
这是因为您使用的是 webpack，您可以将样式表编写在css or scss files. 这意味着您将在 app.js 中导入它。因此，sass-loader or css-loader当您处于开发环境时，webpack 将用于捆绑您的 css 文件。
So it will not work immediately, the browser will load your bundle.js first, exec js file, generate stylesheet and insert them into header.
所以它不会立即工作，浏览器将首先加载您的 bundle.js，执行 js 文件，生成样式表并将它们插入到标题中。
If you want to work immediately, you should write your stylesheet in your html file.
如果您想立即工作，您应该在您的 html 文件中编写您的样式表。
And remember it also take some time to load your background image.
请记住，加载背景图像也需要一些时间。
回答by enso
CSS:
CSS：
.Logo { background-image: url(./logo.png); }
React:
反应：
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;
回答by Nishant Iyengar
Discovered this by trial-and-error. The key is to refer to the height and width property tag of an tag which automatically resizes the dimensions.
通过反复试验发现了这一点。关键是引用自动调整尺寸大小的标签的高度和宽度属性标签。
React
反应
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;
background-styles.js
背景样式.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;
