Tambien podemos agregar el source de la imagen desde los template literals
import img from "./example-img.png"
// inside templates
<img src="${img}">
Introducción
¿Qué es Vite?
Historia del Ecosistema de JavaScript
Características de Vite
Setup inicial
¿Cómo instalar Vite?
Boilerplate de Vite
Estilos CSS
Importar CSS
Pre-procesadores CSS
CSS Modules
Archivos estáticos
Importar imágenes
Importar JSON
Importación global
Configuración
Uso con TypeScript
Vite Config
Construir para producción
Variables de entorno y modos
Sitios multi-página
Construir librerías
Frameworks
Soporte para React
Soporte para Vue
Cierre del curso
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Diana Martínez
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}"/>
En la sección de sources, de nuestras devtools, podremos encontrar dos archivos.
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
Aportes 5
Preguntas 3
Tambien podemos agregar el source de la imagen desde los template literals
import img from "./example-img.png"
// inside templates
<img src="${img}">
Después de 6 meses estudiando en Platzi, encontré que cuando existe un error ortográfico se la llama:
import imageStyle from './image.module.css';
import imgVue from './vue-js.svg';
<img id="imgVue" src="${imgVue}" class="${imageStyle.imgVue}" />
Cada archivo multimedia ubicado en la carpeta public debe ser importado desde nuestro código, porque las rutas en nuestro entorno de desarrollo no serán las mismas en producción.
Así lo explica la documentación
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?