No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Importar imágenes

9/19
Recursos

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

Aportes 5

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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:

typo

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

Les recomiendo por buena práctica no usar variables como "var1","img" , etc Aunque sea repaso.. empiezas a formar hábito Un consejo que se extrae del libro "Clean Code" dice que tu codigo debe ser lo mas auto-explicativo posible En funciones y variables, en todo lo que puedas Formar el hábito te ayudará a ser un programador sobresaliente, empezar desde el principio con buenas prácticas.