我如何使用 Svelte 的道具为我正在构建的这个可重复使用的画廊导入数据？

Question

我正在使用 Svelte 构建一个可重复使用的图库。所有其他都已完成，但我有多个画廊，所以有多组图像数据，我无法弄清楚如何将图像数据作为道具传递。不管怎样，代码应该能更好地表达我的意思。

我有一个用于图像数据的 .js 文件：

//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"
    }
]

图库组件本身（我只是展示了我想如何导入图像 [这显然不起作用]）：

//slidegallery.svelte
    export let gallerydata = {gallerydata}
    import {images} from gallerydata

和插入画廊的小片段：

//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'/>

如您所见，我试图在索引页面的每个图库中指明我想要的图像，并且我的组件正在寻找从指定路径导入图像。我一直坚持这一点，所以任何方向都会有很大的帮助。我不确定我的整个方法是否错误，或者这是否是一个简单的语法问题。不管怎样，先谢谢你！

Answer 1

您可能可以使用动态导入，但考虑到您的数据形式，将它们转换为 JSON 并使用 fetch.[=21 加载它们似乎更容易和更直接=]

首先，您需要将画廊数据转换为 JSON 文件，并将它们放在 static 目录中，以供下载。例如：

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"
    }
]

然后，你可以像这样制作一个图库组件：

<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}

如果你真的希望你的画廊数据是一些 JavaScript，你可以像这样将动态导入传递给你的组件：

<SlideGallery gallery={import('../data/rocketgallery.js')} ... />

然后您的组件将收到一个将解析为 JS 模块的承诺。您可以像这样使用它们，例如：

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}

请注意，要使其正常工作，您需要将 静态字符串 （即不是用代码构造的字符串或变量中的某些字符串）传递给动态导入，因为否则打包器将不会“看到”它们。

// 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')

或者，您可以将原始 .js 文件放入 static，这样您就可以知道它们的实际运行时 URL。

我如何使用 Svelte 的道具为我正在构建的这个可重复使用的画廊导入数据？

How can I import data using props with Svelte for this reusable gallery I'm building?

javascript

components

svelte

sveltekit