Estoy construyendo una galería reutilizable usando Svelte. Todo lo demás está hecho, pero tengo varias galerías, por lo que hay varios conjuntos de datos de imagen y no sé cómo pasar los datos de imagen como apoyo. De todos modos, el código debería mostrar mejor lo que quiero decir.
Tengo un archivo .js para los datos de la imagen:
//rocketgallery.js export const images = [ { id: 0, alt: "Zack and Alex arming a rocket.", src: "img/gallery/rocket1.jpg" }, { id: 1, alt: "Zack and Matt performing parachute testing.", src: "img/gallery/rocket2.jpg" } ]el componente de la galería en sí (solo muestro cómo me gustaría importar las imágenes [lo que obviamente no funciona]):
//slidegallery.svelte export let gallerydata = {gallerydata} import {images} from gallerydatay el pequeño fragmento para insertar una galería:
//in index.svelte import Slidegallery from '$lib/components/slidegallery.svelte' <Slidegallery gallerydata='../data/rocketgallery.js' size='20vw' position='left' display='wrap'/> <Slidegallery gallerydata='../data/anothergallery.js' size='20vw' position='center' display='block'/>Entonces, como puede ver, estoy tratando de indicar qué imágenes quiero en cada galería en la página de índice, y mi componente busca importar las imágenes desde la ruta especificada. He estado atascado en esto por un tiempo, por lo que cualquier dirección sería de gran ayuda. No estoy seguro de si todo mi enfoque de esto es incorrecto o si se trata de un simple problema de sintaxis. De cualquier manera, pre-gracias!
Probablemente podría arreglárselas con importaciones dinámicas pero, dada la forma de sus datos, parece más fácil y directo convertirlos en JSON y cargarlos con fetch .
Primero, convertiría los datos de sus galerías en archivos JSON y los colocaría en el directorio static para que estén disponibles para su descarga. Por ejemplo:
static/galleries/gallery1.json
[ { "id": 0, "alt": "Zack and Alex arming a rocket.", "src": "img/gallery/rocket1.jpg" }, { "id": 1, "alt": "Zack and Matt performing parachute testing.", "src": "img/gallery/rocket2.jpg" } ]Entonces, podrías hacer un componente de galería como este:
<script> export let gallery; const loadGallery = (name) => fetch(`/galleries/${gallery}.json`) .then((res) => { if (!res.ok) throw new Error('Fetch error'); return res; }) .then((res) => res.json()); $: imagesPromise = gallery && loadGallery(gallery); </script> {#if imagesPromise} {#await imagesPromise then images} <pre>{JSON.stringify(images, null, 2)}</pre> {:catch err} <pre>{err}</pre> {/await} {/if}Si realmente desea que los datos de sus galerías sean algo de JavaScript, puede pasar importaciones dinámicas a sus componentes de esta manera:
<SlideGallery gallery={import('../data/rocketgallery.js')} ... />Luego, su componente recibiría una promesa que se resolvería en el módulo JS. Podrías usarlos así, por ejemplo:
SlideGallery.svelte
<script> export let gallery; </script> {#if gallery} {#await gallery then imageModule} <pre>{JSON.stringify(imageModule.images, null, 2)}</pre> {:catch err} <pre>{err}</pre> {/await} {/if}Tenga en cuenta que, para que esto funcione, debe pasar cadenas estáticas (es decir, no cadenas construidas con código o alguna cadena en una variable) a sus importaciones dinámicas, porque de lo contrario el empaquetador no las "verá".
// works because the bundler sees the full URL import('../data/gallery.js') // doesn't work because the bundler doesn't see the URL hidden // in the dynamic string, and so the import won't be rewritten // to what it'll really be in your bundled app import('../data/' + 'gallery.js') O, alternativamente, puede colocar archivos .js sin procesar en el static , para que pueda conocer sus URL de tiempo de ejecución reales.