Importación de imágenes con React

En este breve artículo, aprenda cómo importar imágenes en React usando require() y la declaración de importación.

Introducción

Al desarrollar aplicaciones web con React, generalmente queremos incluir elementos visuales para captar el interés de los usuarios. Estos elementos visuales pueden ser cualquier tipo de imagen, incluidos JPG, PNG, SVG, GIF y muchos otros.

En este artículo, aprenderemos cómo importar imágenes con React y veremos las diversas formas en que se puede lograr.

Las imágenes externas y las imágenes locales son los dos tipos de imágenes que queremos usar en nuestra aplicación React. En este artículo, nos preocupamos principalmente por las imágenes locales porque las imágenes externas no requieren que las importemos.

Las imágenes externas son imágenes que ya se han alojado externamente y cualquiera puede acceder a ellas a través de una URL, mientras que las imágenes locales son imágenes que solo están disponibles para nosotros en nuestra computadora local o carpeta de proyecto y que queremos usar en nuestra aplicación.

Cómo mostrar imágenes alojadas externamente

Antes de entrar en cómo importar imágenes, es importante comprender que las imágenes alojadas en otros lugares funcionan de la misma manera que siempre hemos usado imágenes en HTML: agregando la URL al atributo src de la etiqueta img :

1
2
3
4
5
6
7
const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

¡Aprendamos ahora cómo podemos importar imágenes (locales) con React!

Cómo importar imágenes con React

Además de las imágenes externas, la forma en que se usan las imágenes en React difiere significativamente de la de otros marcos o incluso de HTML. Estas imágenes primero deben importarse a React antes de que puedan usarse en nuestra aplicación.

Esto se puede lograr de dos maneras: utilizando la instrucción import o utilizando la función require(). Repasaremos ambos enfoques.

Cómo importar imágenes con React usando la instrucción import

Debido a que es más fácil de leer y comprender, la instrucción importar es el método más utilizado para importar imágenes almacenadas localmente en React. Las imágenes se tratan como exportaciones predeterminadas, y cuando las importamos, lo hacemos de la misma manera que importamos componentes. Esto se hace especificando la ruta relativa del archivo a la imagen que estamos importando:

1
2
3
4
5
6
7
8
9
import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

En el código anterior, todavía usamos la etiqueta img y el atributo src, pero esta vez el atributo src recibe una variable en lugar de una cadena, que se pasa usando llaves en JSX.

{.icon aria-hidden=“true”}

Nota: Podemos importar tantas imágenes como queramos, pero cada imagen debe tener un nombre único en la declaración de importación, de lo contrario, arrojará un error.

Es importante entender cómo especificar y obtener rutas relativas para archivos; de lo contrario, pueden ocurrir fallos y errores. En el ejemplo anterior, la imagen se guardó en /src/images.

Cómo importar imágenes con React usando la función require()

La función require() es una función de Node.js que se usa para incluir módulos externos de archivos distintos al archivo actual. Funciona de la misma forma que la instrucción import y nos permite incluir imágenes:

1
2
3
4
5
6
7
8
9
let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

La única diferencia es la primera línea donde requerimos la imagen a través de su ruta relativa y luego la almacenamos en una variable a la que accedimos en la etiqueta img mediante llaves.

También podemos decidir hacer esto en línea y evitar la línea adicional utilizada para asignar la imagen a una variable, ya que no es obligatorio:

1
2
3
4
5
6
7
const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

Conclusión

Aprendimos cómo importar imágenes locales usando la instrucción import y la función require() en este artículo.