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.
Si quieres puedes descargar esta imagen
// 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
