Uso de React Inline Styles para configurar la imagen de fondo

1. Uso de estilos en línea para configurar la imagen de fondo en React
2. Uso de estilos en línea para establecer la imagen local como fondo en React

Al crear aplicaciones web complejas, los desarrolladores a menudo necesitan establecer una imagen de fondo personalizada. El enfoque estándar es utilizar CSS y HTML.

Al desarrollar aplicaciones React, tiene muchas opciones para configurar una imagen de fondo. Puede usar archivos CSS normales o usar soluciones CSS-in-JS como estilos en línea en React.

Uso de estilos en línea para configurar la imagen de fondo en React

Los estilos en línea le permiten configurar HTML o estilos de componentes React dentro de archivos JavaScript. Aquí hay un ejemplo de cómo configurar una imagen de fondo en el componente de la clase React:

class App extends Component {
  render() {
    const containerStyle = {
      backgroundImage:
        "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

HTML vs JSX

Como HTML, en JSX, usamos el atributo style del contenedor para definir estilos en línea. Sin embargo, a diferencia de HTML, no podemos establecer su valor en un texto simple. En su lugar, usamos llaves para pasar una variable de JavaScript, containerStyle. Esta variable es esencialmente un objeto que contiene pares clave-valor de propiedades CSS y sus valores correspondientes.

Una diferencia importante es que las claves de un objeto de style no deben contener espacios ni otros símbolos no alfanuméricos. En CSS normal, la propiedad se definiría como background-image, pero se convierte en la propiedad backgroundImage de un objeto style en JavaScript.

Una ventaja más de usar soluciones CSS-in-JS es que sus definiciones de estilo pueden incluir referencias de variables. Esto se logra mediante el uso de plantillas literales. He aquí un ejemplo:

class App extends Component {
  render() {
    const backgroundImageURL =
      "https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
    const containerStyle = {
      backgroundImage:
        `url(${backgroundImageURL})`,
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

En este caso, los estilos reflejarán los cambios en la variable.

Uso de estilos en línea para establecer la imagen local como fondo en React

Si desea utilizar una imagen de la carpeta local assets, puede utilizar una instrucción import o el método require() para cargarla. Sin embargo, la carga de imágenes solo funcionará si su entorno de desarrollo incluye webpack.

Cualquiera que sea la forma que elija para cargar su imagen en la aplicación, deberá especificar la ruta relativa:

import image from "./assets/filename.jpg"

Esta ruta relativa asume que tanto el componente como la carpeta de activos están ubicados en la carpeta src.

Una vez que haya importado una imagen, puede hacer referencia a ella por el nombre de la importación (en este caso, image) tal como haría referencia a una variable. Cada imagen que use en su aplicación debe importarse por separado, pero su imagen de fondo solo tendrá que importarse una vez.

También puede crear una variable separada y usarla para almacenar el valor de la imagen cargada con el método require():

const image = require("./assets/filename.jpg")

Cargar imágenes y darles un nombre de variable es más legible y le da la libertad de realizar cambios cuando sea necesario.