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

Posted 2023-02-22

【中文标题】如何在 reactjs 中设置背景图片？

【英文标题】：How to set a background image in reactjs?

【发布时间】：2017-12-01 11:33:36

【问题描述】：

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

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

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

【参考方案1】：

您需要将图像存储在项目的 Public 文件夹中。您可以使用正斜杠/ 引用公用文件夹并从那里访问您的图像。

例如：

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

你可以在 CSS 文件中做同样的事情：

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

【参考方案2】：

背景应该已经是一个字符串：

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

你也可以使用 ES6 字符串模板：

backgroundImage: `url($Background)`

你应该读一下这可能会有所帮助 -

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

【讨论】：

看他的 css，我想他不是在 React Component 中使用样式，而是从 css 文件中加载它

我使用的是 react-create-app 而不是 webpack ......我该如何解决这个问题

链接已损坏 :(

【参考方案3】：

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

在您的代码中，如果您的存储库结构与我的相似，则可能是路径问题。 希望这能解决您的疑问。

【讨论】：

@bier hier 如果能解决您的问题，请接受我的回答。 :) 谢谢！

【参考方案4】：

您需要将图像存储在项目的 src 文件夹中。您可以使用“./”引用您的 css 文件中的图像，该文件也应该在 src 文件夹中

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

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

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

【参考方案5】：

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

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

【参考方案6】：

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  />;


export default Header;

【参考方案7】：

你需要把图片文件放到public文件夹里，然后试试

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

文件夹结构如下

公开 -- logo.jpg

【参考方案8】：

纯 ReactJS 和内联 CSS

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

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

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

这是带有内联样式的ReactJS 的情况，其中Image 是您必须使用路径导入的本地文件。

【参考方案9】：

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

所以它不会立即工作，浏览器会先加载你的 bundle.js，执行 js 文件，生成样式表并将它们插入到 header 中。

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

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

【参考方案10】：

通过反复试验发现了这一点。关键是引用自动调整尺寸大小的标签的高度和宽度属性标签。

反应

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

【讨论】：

他要求将他的图像集成到 css 中。