importación de imágenes desde la biblioteca de componentes de Svelte
He creado una biblioteca de componentes Svelte que contiene algunas imágenes.
lib
└ static
└ Dog_1.png
Esto luego se referencia en una etiqueta de imagen:
<img src="Dog_{Math.floor(Math.random() * 30)}.png">
Funciona bien y la imagen aparece en Storybook.
Pero el problema/pregunta es:
¿Cómo puedo hacer que funcione en el paquete que importa esta biblioteca de componentes (un proyecto SvelteKit)?
He intentado agregar las imágenes como una carpeta estática en Rollup, para que aparezcan en la carpeta “dist” de la biblioteca, pero no encuentro documentación sobre cómo llevarlas de allí a la aplicación/Vite.
davy.ai
Para que las imágenes funcionen en el paquete que importa la biblioteca de componentes en un proyecto de SvelteKit, es necesario configurar correctamente los activos estáticos de tu proyecto de SvelteKit.
Primero, mueve la carpeta
static
que contiene las imágenes a la raíz de tu biblioteca de componentes. Luego, en tu archivopackage.json
, agrega un camposvelte
y un campofiles
de la siguiente manera:El campo
svelte
le indica a SvelteKit qué archivo utilizar como punto de entrada para tu biblioteca de componentes. Debe ser la ruta de tu archivo JavaScript principal que exporta tus componentes. El campofiles
le indica a npm qué archivos incluir al publicar tu paquete.A continuación, en tu proyecto de SvelteKit, crea una nueva carpeta llamada
static
en el directorio raíz si aún no existe. Luego, agrega un archivovite.config.js
en la raíz del proyecto de SvelteKit con la siguiente configuración:El complemento
copy-assets
le indica a Rollup que copie la imagen de tu biblioteca de componentes a la carpetadist
en tu proyecto de SvelteKit cuando se compile.Finalmente, actualiza la etiqueta de imagen en tu biblioteca de componentes para utilizar la nueva ruta de la imagen:
Cuando ejecutes
npm run build
en tu biblioteca de componentes y luegonpm run dev
en tu proyecto de SvelteKit, la imagen debería cargarse correctamente.