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

有时，用户在开发 React 应用时需要设置背景图片。在本文中，我们将讨论在 React 应用中设置背景图像的所有方法。

我们将讨论如何使用内联 CSS和外部 CSS 设置背景图像。我们还将讨论几种添加背景图像 URL 的方法。

先决条件：该项目的先决条件是：

• 反应

创建反应应用程序

第 1 步：用户可以使用以下命令创建一个新的 react 项目。

npx create-react-app testapp

第 2 步：接下来，用户需要使用以下命令从终端移动到测试应用程序项目文件夹。

cd testapp

项目结构：如下图所示。

方法一：使用内联CSS：在这个方法中，我们在元素内部添加样式属性。

文件名：App.js

在 App.js 中，我们将在 div 元素中添加样式属性，并使用内联 CSS 为 div 元素设置背景图像。

Javascript

import React, { Component } from 'react';
  
class App extends Component {
  render() {
    const myStyle={
        backgroundImage: 
 "url('https://media.geeksforgeeks.org/wp-content/uploads/rk.png')",
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      

        
 geeksforgeeks 
      
    );
  }
}
   
export default App;

    );   } }     export default App;

---

CSS

.GeeksForGeeks {
  background-image: 
  url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
  background-size: "cover";
  height: 100vh;
  margin-top: -70px;
  font-size:50px;
  background-repeat:no-repeat; 
}

Javascript

import React, { Component } from 'react';
  
class App extends Component {
  render() {
    const myStyle={
backgroundImage:`url(${process.env.PUBLIC_URL+ "/image.png"})`
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        };
    return (
      

        
GeeksForGeeks
      
    );
  }
}
   
export default App;

Javascript

import React, { Component } from 'react';
  
class App extends Component {
  render() {
   const myStyle={
        backgroundImage: "url(/image.png)",
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      

        
GeeksForGeeks
      
    );
  }
}
   
export default App;

Javascript

import React, { Component } from 'react';
import background from "./image.png";
  
class App extends Component {
  render() {
    const myStyle={
        backgroundImage: `url(${background})` ",
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      

        
GeeksForGeeks
      
    );
  }
}
   
export default App;

输出：

方法2：使用外部CSS：在这个方法中，我们添加一个外部CSS文件来为react组件设置背景图片。

文件名：App.js

在 App.js 中，我们将添加一个带有 className 属性的简单 div 元素。此外，我们导入一个外部 CSS 文件来为 div 元素设置背景图像。

Javascript

import React, { Component } from 'react';
import './App.css';
  
class App extends Component {
  render() {
    return (
      
      
GeeksForGeeks
      

    );   } }     export default App;