React Image src

1. Hacer referencia a una imagen local en React usando el paquete create-react-app
2. Cargar una imagen usando la declaración import en React
3. Cargue una imagen usando el método require() en React
4. Cómo funcionan import y require() en React

Si eres nuevo en React, probablemente hayas notado que React usa una sintaxis similar a HTML llamada JSX. Esta sintaxis proporciona una forma sencilla de escribir aplicaciones React. Cuando se trata de incluir imágenes en la aplicación, las cosas se complican un poco. A diferencia de HTML, el código de React pasa por muchos cambios antes de mostrarse a los usuarios.

Al cambiar del modo de desarrollo al de producción, la ubicación relativa de las imágenes puede cambiar. Necesita una forma confiable de importar e incluir imágenes en sus componentes de React.

Hacer referencia a una imagen local en React usando el paquete create-react-app

Al desarrollar una aplicación React, puede incluir fácilmente una imagen siempre que su entorno de desarrollo incluya webpack. Cuando se utiliza el paquete create-react-app, webpack se incluye automáticamente.

La etiqueta de elemento en JSX funciona de la misma manera que en HTML: es una etiqueta img de cierre automático. Los desarrolladores pueden utilizar el atributo src para especificar la ruta. En este ejemplo, el elemento img utiliza una URL de imagen codificada como fuente:

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

Si desea especificar una ruta relativa a la ubicación de la imagen dentro de la carpeta, las cosas se complican un poco. Proporcionar una fuente para una imagen no es tan simple como establecer el atributo src igual a una ruta de archivo relativa en la computadora. En primer lugar, los navegadores de espacio aislado no pueden acceder a la ruta relativa del archivo src de su computadora. Especialmente, no puede confiar en el nombre de ruta local una vez que se implementa la aplicación. En su lugar, los desarrolladores deben usar declaraciones import o require() para cargar la imagen.

Al desarrollar un proyecto create-react-app, es una buena práctica tener una carpeta de activos para almacenar todas sus imágenes. Por lo general, esta carpeta se crea en la carpeta src de su proyecto. Suponiendo que sigue esta convención para almacenar las imágenes, veamos cómo importaría y usaría las imágenes como valor para el atributo src.

Cargar una imagen usando la declaración import en React

También puede utilizar la instrucción import para cargar una imagen. Parece sencillo y cumple el mismo objetivo que la URL codificada:

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

Siempre que proporcione una ruta válida, su create-react-app debería mostrar una imagen.

En este caso, la ruta funciona porque las carpetas testComponent y assets se encuentran en la carpeta src. El final de la ruta - cat.jpg es solo un nombre del archivo individual.

La declaración import proporciona un beneficio adicional de almacenar el activo importado en una variable. Al establecer un valor para el atributo src, puede hacer referencia al nombre de la variable de la declaración de importación. <img src={image} />.

Puede leer más sobre la importación aquí.

Cargue una imagen usando el método require() en React

Los desarrolladores de React utilizan el método require() para cargar varios tipos de módulos. También se puede utilizar para cargar imágenes.

Si desea utilizarlo dentro de JSX, el método require() debe colocarse entre llaves. Como sabrá, el código entre llaves se interpreta como JavaScript válido en JSX.

<img src={require("./assets/cat.jpg").default} />

El método require() toma un argumento, una ruta relativa válida a una imagen. Además, tenga en cuenta que debe acceder a la propiedad .default del objeto devuelto en algunos navegadores.

Alternativamente, puede crear una variable de image para almacenar su imagen y luego hacer referencia a ella en su componente. He aquí un ejemplo:

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

Puede nombrar la variable como desee. No tiene por qué llamarse image.

Recuerde que si desea hacer referencia a una variable de JavaScript en React, debe envolverla entre llaves.

No hay diferencia entre el método require() y la declaración import con respecto al rendimiento.

Cómo funcionan import y require() en React

Algunos desarrolladores de React pueden encontrar sorprendente que webpack (y otros paquetes) manejen la carga de imágenes, no JavaScript o React.

Cuando carga una imagen en un componente, el empaquetador registra internamente la asociación entre el componente y la imagen. Luego, obtendrá el activo, lo copiará, le dará un nombre único y lo colocará en el directorio accesible en el servidor.