SvelteKit中$lib被替换为rc致图片找不到的问题求助

问题核心 #

使用import.meta.glob('$lib/*.png')加载src/lib下的图片后，手动拼接的图片路径被错误解析为/rc/lib/xxx.png，触发资源找不到的报错。

错误原因 #

你之前的代码直接截取import.meta.glob返回的路径字符串并手动拼接，而这个路径是Vite内部处理的虚拟路径，并非浏览器可访问的实际资源URL。SvelteKit在解析$lib别名时，会将其映射到内部虚拟模块前缀rc，直接使用这个路径会导致请求错误的资源地址。

解决方案 #

方法1：使用eager模式直接获取资源URL #

修改Arts.svelte中的get函数，通过import.meta.glob的配置直接获取处理后的资源URL：

<script lang="ts">
    export const get = async () => {
        // 配置eager: true直接加载资源，import: 'default'获取资源URL
        const allimgsf = import.meta.glob('$lib/*.png', { eager: true, import: 'default' });
        const iterableImages = Object.entries(allimgsf);

        const allimgs = iterableImages.map(([path, url]) => {
            addTrigger();
            const name = path.split('/').pop()?.replace('.png', '') || '';
            return {
                path: url as string,
                name
            };
        });

        return allimgs;
    };

    export let addTrigger: () => void;
</script>

模板中直接使用返回的URL：

<img src={f.path} alt={f.name} />

方法2：异步解析资源获取URL #

如果不需要预加载资源，可保留异步模式，调用resolver函数获取资源模块并提取URL：

<script lang="ts">
    export const get = async () => {
        const allimgsf = import.meta.glob('$lib/*.png');
        const iterableImages = Object.entries(allimgsf);

        const allimgs = await Promise.all(
            iterableImages.map(async ([path, resolver]) => {
                addTrigger();
                // 调用resolver获取资源模块
                const module = await resolver();
                // 模块的default属性即为资源的可访问URL
                const url = module.default as string;
                const name = path.split('/').pop()?.replace('.png', '') || '';
                return {
                    path: url,
                    name
                };
            })
        );

        return allimgs;
    };

    export let addTrigger: () => void;
</script>

模板同样直接使用f.path作为图片src。

方法3：将图片移至static目录（不推荐） #

将图片从src/lib移到static/lib目录，此时可直接使用/lib/xxx.png作为路径，但这种方式会跳过Vite对资源的优化（如压缩、哈希命名），仅适合不需要资源处理的场景。

关键说明 #

Vite处理静态资源时，会将资源转换为可访问的URL（开发时为临时路径，构建时为带哈希的路径），直接截取import.meta.glob返回的虚拟路径会导致解析错误，必须通过模块导出的default属性获取正确的资源URL。

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