如何在 Svelte 中有条件地加载图像？

Question

我正在尝试创建一个网页，当您打开该页面时，您会得到一张随机图像。我希望 svelte 在页面加载时决定随机图像，然后将该图像加载到“src”标签中。我有一定数量的图像可供选择。

我可以这样做，但是，我不希望页面获取所有图像，然后随机选择一张。我想随机选择一个，然后加载该图像，以便将请求和数据保持在最低限度。

这是我现在拥有的：

<script>
    import heroOne from "$lib/hero.webp";
    import heroTwo from "$lib/heroTwo.webp";

    let heroImg;
    const rand = Math.floor(Math.random() * 2);
    switch(rand){
        case 0: heroImg = heroOne; break;
        case 1: heroImg = heroTwo; break;
    }
</script>

<img src={heroImg} alt="Some alt text">

据我所知，这仍然会加载两个英雄图像。有没有办法只加载选择后的图像？

Answer 1

据我所知，这仍然会加载两个英雄图像。

没有。

导入会变成 URL，URL 指向的资源只有在某个地方使用时才会加载，在本例中是图像

src

。