¿Cómo establecer una imagen de fondo con React Inline Styles?

Un proyecto de React se crea usando el comando create-react-app y la tarea es establecer una imagen de fondo usando estilos en línea de reacción. Hay tres enfoques que se analizan a continuación:

Enfoque 1: establecer una imagen de fondo usando una URL externa: si la imagen se encuentra en algún lugar en línea, la imagen de fondo del elemento se puede configurar de esta manera:

Nombre de archivo: App.js

import React from "react";
  
const App = () => {
  return (
    <div style={{
      backgroundImage: 'url("https://media.geeksforgeeks.org/'+
      'wp-content/uploads/20201221222410/download3.png")',
      height: "300px", backgroundRepeat: "no-repeat"
    }}>
      <h1> HELLO </h1>
    </div>
  );
};
  
export default App;

Enfoque 2: Establezca la imagen de fondo usando el método de URL absoluta: si coloca su imagen, por ejemplo, el archivo background.jpg dentro de la carpeta public/, puede incluir la URL absoluta usando la variable de entorno PUBLIC_URL .

Nombre de archivo: App.js

import React from "react";
  
const App = () => {
  return (
    <div style={{
      backgroundImage: `url(${process.env.PUBLIC_URL
          + "/background.jpg"})`,
      height: "300px", backgroundRepeat: "no-repeat"
    }} >
      <h1>Hello</h1>
    </div>
  );
};
  
export default App;

Enfoque 3: Configure la imagen de fondo usando el método de URL relativa: si coloca su imagen, por ejemplo, el archivo background.jpg dentro de la carpeta public/ en la aplicación de reacción, puede acceder a ella en <su dirección de host>/background.jpg. 

Luego puede asignar la URL relativa a su dirección de host para configurar la imagen de fondo de esta manera:

Nombre de archivo: App.js

import React from "react";
  
const App = () => {
  return (
    <div style={{
      backgroundImage: "url(/background.jpg)",
      height: "300px",
      backgroundRepeat: "no-repeat"
    }} >
      <h1>Hello</h1>
    </div>
  );
};
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: