如何在 Svelte 的组件中动态导入 $lib 中存储的图像？

Question

我正在使用一组虚拟数据来测试如何显示来自 api 的信息。在该数据中，我有一个相对图像路径，为了简化测试，我将一些图像存储在本地

$lib

中。

我循环访问该数据集中的每个对象，并创建一个组件，并将相对图像路径传递给该对象。在我的测试中，相对路径正确解析，但我无法动态加载图像。

经过一番挖掘后，这似乎是由于

$lib

的文件结构和权限造成的。如果我对图像使用静态解决方案，只需动态调整相对 url，那么图像导入似乎很容易完成，但我希望能够在图像方面使用 Vite 的性能改进。事实上，出于这个确切的原因，Sveltekit 文档建议将图像存储在

$lib

内的目录中。

在组件中，我可以从

$lib

手动导入每个图像，它按预期工作，如下所示：

<script>
import img from '$lib/assets/sample-image.jpg'; 
</script>

<img src={img} />

但是对于我来说，我无法弄清楚如何使用动态道具来更改导入路径。我想它会看起来像这样：

import img from '$lib/assets/{object.imageUrlProp}';

或者图像中某种类型的直接访问

src

类似于静态使用的样子：

<img src="$lib/assets/{object.imageUrlProp}" alt="Image" />

但是这些都不是有效的语法。

如何在 Svelte 的组件中动态导入存储在

$lib

中的图像？

Answer 1

如果您只提供文件名，则需要将名称插入其中的动态导入。您可能必须将扩展分开，以便捆绑器知道正在导入的内容。

{#await import(`$lib/assets/${object.imageUrlProp}.jpg`) then { default: src }}
  <img {src} alt="Image" />
{/await}

您可能还可以在父级中执行glob import（使用

eager

），然后您不必

await

并且可以传递可以直接传递给图像的完整路径

src

。

应遵循以下原则：

const images = import.meta.glob('$lib/assets/*.jpg', { eager: true });

<Component imgSrc={images[`$lib/assets/${object.imageName}.jpg`]} />