如何无需导入特定图片，从静态文件夹动态加载图片？

问题场景 #

我在static/assets/gear-img路径下存放了大量图片，需要在Svelte组件中动态使用——组件无法预知要显示的具体图片，图片名称由父页面传入的属性决定。

父页面代码 #

{#each setup as theGear}
 <Gear name="{theGear.name}" icon="{theGear.icon}" desc="{theGear.desc}"/>
{/each}

其中theGear是数组setup中的对象，theGear.icon为图片名称字符串（不含.png后缀）。

Gear组件代码（原写法，无法正常加载） #

<script lang="ts">
export let name: string;
export let icon: string;
export let desc: string;
</script>

<img src="static/assets/gear-img/{icon}.png" alt="" />

问题 #

上述写法无法正确解析图片路径，导致图片加载失败。

解决方案 #

方法1：使用根路径直接访问（适用于静态资源部署在根目录） #

静态文件夹（static）中的内容会被构建工具直接复制到输出目录的根路径，因此可以去掉路径中的static前缀，直接使用绝对路径：

<script lang="ts">
export let name: string;
export let icon: string;
export let desc: string;
</script>

<img src="/assets/gear-img/{icon}.png" alt={name} />

这种方式简单直接，适合确定静态资源部署在根域名下的场景。

方法2：使用import.meta.url构建绝对路径（跨环境通用方案） #

如果需要适配子路径部署等不同环境，可以通过new URL结合import.meta.url生成可靠的资源路径，确保开发和生产环境都能正常解析：

<script lang="ts">
export let name: string;
export let icon: string;
export let desc: string;

// 根据组件实际位置调整相对路径层级
const getImagePath = (iconName: string) => {
  return new URL(`../static/assets/gear-img/${iconName}.png`, import.meta.url).href;
};
</script>

<img src={getImagePath(icon)} alt={name} />

注意：../static的层级需要根据Gear组件在项目中的位置调整，确保能正确指向静态文件夹内的图片。

内容的提问来源于stack exchange，提问作者Lars Lehmann