Question

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

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

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

Answer 1

Here是一个简单的github存储库，我创建了将背景图像放到body标签上。此示例没有在webpack配置中专门为css添加任何更改/插件。

在您的代码中，如果您具有与我类似的存储库结构，那么它可能是路径问题。希望这能解决您的疑问。

Answer 2

您需要将图像文件放在公用文件夹中，然后尝试

background: url(./logo.jpg) no-repeat;

文件夹结构类似

公共 -logo.jpg

Answer 3

后台应该已经是一个字符串：

backgroundImage: "url(" + Background + ")"

您还可以使用ES6字符串模板：

backgroundImage: `url(${Background})`

你应该阅读它可能有所帮助 -

https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

Answer 4

这是因为您使用的是webpack，您可以在css or scss files中编写样式表。这意味着你将在app.js中导入它。因此，当您处于开发环境中时，webpack将使用sass-loader or css-loader捆绑您的css文件。

因此它不会立即起作用，浏览器将首先加载你的bundle.js，exec js文件，生成样式表并将它们插入标题。

如果您想立即工作，您应该在html文件中编写样式表。

请记住，加载背景图片也需要一些时间。

Answer 5

我一直遇到让webpack正确加载背景图片的问题。也许它已在webpack 2中修复，但我还没有使用它。我已经退回到使用copy-webpack-plugin将图像复制到目录，然后在CSS中引用该位置。

new CopyWebpackPlugin([
        { from: './src/images', to: 'images' }
])

Answer 6

我找到了解决方案。您需要将图像放在项目的“公共”文件夹中。然后，您可以通过输入

来访问它们

<img src="/background.jpg" />

CSS也是如此

.background { background-image: url("/background.jpg"); }

Answer 7

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;

Answer 8

纯ReactJS和内联CSS

如果您正在寻找直接方法，并且在这种情况下使用local文件。试试

import Image from "../../assets/image.png"

<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
>Background Image
</div>

使用内联样式的ReactJS就是这种情况，其中Image是必须通过路径导入的本地文件。

Answer 9

您需要将图像存储在项目的 src 文件夹中。您可以使用 "./"

引用 css 文件中的图像，该图像也应位于 src 文件夹中

例如：您在此目录中的图像“src/images/background.jpg”

然后您可以通过以下方式在您的 css 文件（位于“src”文件夹中）中引用它：

.background {
   background-image: url("./images/background.jpg");
}

Answer 10

通过反复试验发现了这一点。关键是要引用标签的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;

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

10 个答案: