如何在reactjs中设置背景图像?

时间:2017-06-28 07:59:37

标签: css reactjs webpack

我有一个reactjs / webpack应用程序,并尝试为bodytag设置背景图片:

body{
    background: url("../images/some-background.jpg");
    background-size:contain;
    background-position:top;
    background: cover;
}

然而,在加载组件后,页面中不存在正文样式。但它显示在控制台中。有没有办法在主页面中显示背景图像,同时在webpack加载的CSS文件中有CSS规则?这是因为reactjs做了我不知道的事情吗?

10 个答案:

答案 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;