Solución para la Extensión Image Preview con Alias en Vite

Cuando se usan alias configurados en vite.config.js, la extensión Image Preview de VS Code no puede resolverlos, lo que impide mostrar las miniaturas de las imágenes al lado del código. A continuación, se presentan varias soluciones para resolver este problema.

---

1. Usar Rutas Relativas

Una solución rápida es usar rutas relativas en lugar de alias para las imágenes. Esto permite que la extensión Image Preview funcione correctamente.

Ejemplo:

// filepath: c:\Users\paco\GitHub\koba\src\componentes\about\AboutPag.jsx
import React from "react";
import AboutFondo from "../../assets/imagenes/fondos/aboutFondo.webp";
// ...existing code...

---

2. Configurar un Archivo jsconfig.json

Puedes configurar un archivo jsconfig.json en la raíz del proyecto para que las herramientas como Image Preview puedan resolver los alias.

Archivo jsconfig.json:

// filepath: c:\Users\paco\GitHub\koba\jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@imagenes/*": ["src/assets/imagenes/*"],
      "@estilos/*": ["src/estilos/*"]
    }
  }
}

Después de agregar este archivo, reinicia tu editor para que los cambios surtan efecto.

---

3. Usar Rutas Absolutas Basadas en la Raíz del Proyecto

Otra opción es usar rutas absolutas basadas en la raíz del proyecto (/src/...) en lugar de alias. Esto también permite que la extensión Image Preview funcione correctamente.

Ejemplo:

// filepath: c:\Users\paco\GitHub\koba\src\componentes\about\AboutPag.jsx
import React from "react";
import AboutFondo from "/src/assets/imagenes/fondos/aboutFondo.webp";
// ...existing code...

---

4. Verificar la Configuración de Alias en vite.config.js

Asegúrate de que los alias estén configurados correctamente en el archivo vite.config.js. Aquí tienes un ejemplo:

// filepath: c:\Users\paco\GitHub\koba\vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@imagenes": "/src/assets/imagenes",
      "@estilos": "/src/estilos",
    },
  },
});

---

Recomendación

La mejor solución es configurar el archivo jsconfig.json, ya que no solo resuelve el problema con Image Preview, sino que también mejora la experiencia de desarrollo al proporcionar autocompletado y navegación para los alias.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@imagenes/*": ["src/assets/imagenes/*"],
      "@estilos/*": ["src/estilos/*"]
    }
  }
}