我有一个reactjs / webpack应用程序,并尝试为bodytag设置背景图片:
body{
background: url("../images/some-background.jpg");
background-size:contain;
background-position:top;
background: cover;
}
然而,在加载组件后,页面中不存在正文样式。但它显示在控制台中。有没有办法在主页面中显示背景图像,同时在webpack加载的CSS文件中有CSS规则?这是因为reactjs做了我不知道的事情吗?
答案 0 :(得分:1)
Here是一个简单的github存储库,我创建了将背景图像放到body标签上。此示例没有在webpack配置中专门为css添加任何更改/插件。
在您的代码中,如果您具有与我类似的存储库结构,那么它可能是路径问题。 希望这能解决您的疑问。
答案 1 :(得分:1)
您需要将图像文件放在公用文件夹中,然后尝试
background: url(./logo.jpg) no-repeat;
文件夹结构类似
公共 -logo.jpg
答案 2 :(得分:0)
后台应该已经是一个字符串:
backgroundImage: "url(" + Background + ")"
您还可以使用ES6字符串模板:
backgroundImage: `url(${Background})`
你应该阅读它可能有所帮助 -
https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/
答案 3 :(得分:0)
这是因为您使用的是webpack,您可以在css or scss files
中编写样式表。这意味着你将在app.js中导入它。因此,当您处于开发环境中时,webpack将使用sass-loader or css-loader
捆绑您的css文件。
因此它不会立即起作用,浏览器将首先加载你的bundle.js,exec js文件,生成样式表并将它们插入标题。
如果您想立即工作,您应该在html文件中编写样式表。
请记住,加载背景图片也需要一些时间。
答案 4 :(得分:0)
我一直遇到让webpack正确加载背景图片的问题。
也许它已在webpack 2中修复,但我还没有使用它。我已经退回到使用copy-webpack-plugin
将图像复制到目录,然后在CSS中引用该位置。
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' }
])
答案 5 :(得分:0)
我找到了解决方案。您需要将图像放在项目的“公共”文件夹中。然后,您可以通过输入
来访问它们 <img src="/background.jpg" />
CSS也是如此
.background {
background-image: url("/background.jpg");
}
答案 6 :(得分:0)
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;
答案 7 :(得分:0)
纯ReactJS和内联CSS
如果您正在寻找直接方法,并且在这种情况下使用local
文件。
试试
import Image from "../../assets/image.png"
<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
>Background Image
</div>
使用内联样式的ReactJS
就是这种情况,其中Image
是必须通过路径导入的本地文件。
答案 8 :(得分:0)
您需要将图像存储在项目的 src 文件夹中。您可以使用 "./"
引用 css 文件中的图像,该图像也应位于 src 文件夹中例如: 您在此目录中的图像“src/images/background.jpg”
然后您可以通过以下方式在您的 css 文件(位于“src”文件夹中)中引用它:
.background {
background-image: url("./images/background.jpg");
}
答案 9 :(得分:-1)
通过反复试验发现了这一点。关键是要引用标签的height和width属性标签,该标签会自动调整尺寸。
反应
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
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;