Importar imágenes
Clase 9 de 19 • Curso de Vite.js
Resumen
Importar una imagen o cualquier archivo multimedia con Vite es bastante sencillo, simplemente debes de usar la palabra clave import, definir un nombre para la imagen e indicar donde se encuentra.
// main.js
import catImage from "./cat.jpg";
Una vez importada tu imagen, solo te faltaría en una etiqueta img pasar el nombre de tu imagen en la propiedad src.
Puedes hacerlo así:
document.getElementById("img").src = catImage;
O así:
<img id="img" src="${catImage}"/>
¿Cómo está pasando?
En la sección de sources, de nuestras devtools, podremos encontrar dos archivos.
- Nuestra imagen
- Un archivo de JS con el nombre de la imagen y adicionalmente la palabra ?import.
Este último es un ECMAScript module que contiene nuestra imagen. Vite convierte todo a un ECMAScript module para un mejor rendimiento.
Contribución creada por: Jofay Zhan Segura