如何在Svelte组件中动态导入$lib目录下的图片？

我在用虚拟数据数组测试API信息展示，数据中包含本地存储在$lib目录下图片的相对路径。遍历数据集创建组件并传入相对路径时，路径解析正确但无法动态加载图片。

经排查，这与$lib的文件结构和权限有关。静态导入图片并动态调整相对URL的方式可行，但我希望利用Vite对图片的性能优化——SvelteKit文档也推荐将图片存储在$lib目录下。

静态导入图片（可行示例） #

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

<img src={img} />

无效的动态路径写法 #

以下两种尝试均为无效语法：

第一种：

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

第二种：

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

解决方案补充 #

Brunnerh的方案对同格式文件有效，针对不同格式需使用glob导入。以下是可行的实现方案，使用as: url简化模块访问：

通用实现

<script lang="ts">
const images: any = import.meta.glob(['$lib/assets/**.jpg', '$lib/assets/**.png', '$lib/assets/**.svg'], { eager: true, as: 'url' });
<!--可修改允许的扩展名，或使用'$lib/assets/**'兼容所有格式；'**'支持嵌套文件夹，直接存资产目录可替换为'*'-->
</script>

<!--imageURL示例：image1.png 或 folder1/image1.png-->
<img src={images["/src/lib/assets/" + imageURL]} />

具体场景实现

我需遍历含相对图片URL的JSON数据，实现代码如下：

<script lang="ts">
    import { pages } from '$lib/data/sample_data.json';
    const images: any = import.meta.glob(['$lib/images/**.jpg', '$lib/images/**.png', '$lib/images/**.svg'], { eager: true, as: 'url' });
</script>

{#each Object.entries(pages) as [key, page], index (key)}
    <div class="page">
        <img src={images["/src/lib/images/" + page.featured_image]} alt={page.image_alt} />
        <h2>{page.title}</h2>
    </div>
{/each}

示例JSON数据：

{
    "pages": [
        {
            "title": "First Page",
            "featured_image": "image.png",
            "image_alt": "alt for page 1"
        },
        {
            "title": "Second Page",
            "featured_image": "image2.jpg",
            "image_alt": "alt for page 2"
        },
        {
            "title": "Third Page",
            "featured_image": "image3.svg",
            "image_alt": "alt for page 3"
        }
    ]
}

内容的提问来源于stack exchange，提问作者Sam Sabin