Curso de React | Cargar una imagen

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Importando las imágenes

(o un video, un sonido, etc…)

import myImg from 'ruta/fondo.svg';	
<img src={myImg} />

Si quisieramos cargar la imagen a partir de un listado de objeto (tipo json), deberemos usar un ficheros js en el que importaremos las imágenes:

import img1 from './assets/img/img1.jpg';
import img2 from './assets/img/img2.jpg';

const images = [
  {
    "title" : "title 1",
    "img": img1
  },
  {
    "title" : "title 2",
    "img": img2
  }
]

export default images;

Cargándolas de la carpeta public

También podríamos cargar imágenes almacenándolas en la carpeta public, utilizando una ruta absoluta:

<img src="/images/image.png" />

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.