Svelte 将 $lib 替换为“rc”而不是“src” | 错误：未找到：/rc/lib/Silika%20Demon%20Charadesign.png

Question

我对 Svelte 有疑问。 我把我的图像放在 src/lib 文件夹中。 与标题相同，存在此错误。 这是我的代码：

组件/Arts.svelte

<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]) => {
                // @ts-ignore
                const imgPath = path.slice(2, -3);

                addTrigger();

                console.log(path);
                return {
                    path: imgPath,
                    name: imgPath.split('/').reverse()[0]
                };
            })
        );

        return allimgs;
    };

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

<div class="arts">
    {#await get() then get}
        {#each Object.values(get) as f}
            <div class="art">
                <img src={f.path + 'png'} alt={f.name} />
                <p>{f.name}</p>
            </div>
        {/each}
    {/await}
</div>

<style>
    .arts {
        margin: 0 auto;
        text-align: center;
    }

    .art {
        width: 320px;
        margin: 20px;
        border: 1px solid black;
        display: inline-block;
        font-weight: bold;
        color: rgb(124, 110, 110);
    }

    .art img {
        -webkit-user-drag: none;
        width: 100%;
        padding: 0.6%;
    }

    .art p {
        font-size: 0.8rem;
    }
</style>

Src 文件夹（如图）我的文件系统的图像

路线/+page.svelte

<script>
    import About from '../components/About.svelte';
    import Arts from '../components/Arts.svelte';
    import Header from '../components/Header.svelte';

    $: artcount = 0;

    let addTrigger = () => artcount++;
</script>

<svelte:head>
    <title>Kinya Website</title>
</svelte:head>

<div>
    <div class="container">
        <Header />
        <About />
        <br />
        <p>Il y a {artcount} publications</p>
        <br />
        <Arts {addTrigger} />
    </div>
</div>

<style>
    .container {
        text-align: center;
        align-items: center;
        width: 100%;
    }

    * {
        font-family: sans-serif;
    }
</style>

我得到了这个错误：每次加载时，都会发生错误：

> /src/lib/LN-Stat-Interface.png
> /src/lib/Silika Demon Charadesign.png
> /src/lib/Which kind of thing are kinya projects.png
Error: Not found: /rc/lib/LN-Stat-Interface.png
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
at Object.#options.hooks.handle (/@fs/C:/Users/kinya/OneDrive/Documents/kinya-website-svelte/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Not found: /rc/lib/Silika%20Demon%20Charadesign.png
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
at Object.#options.hooks.handle (/@fs/C:/Users/kinya/OneDrive/Documents/kinya-website-svelte/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Not found: /rc/lib/Which%20kind%20of%20thing%20are%20kinya%20projects.png
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
at Object.#options.hooks.handle (/@fs/C:/Users/kinya/OneDrive/Documents/kinya-website-svelte/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Not found: /rc/lib/LN-Stat-Interface.png
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
at Object.#options.hooks.handle (/@fs/C:/Users/kinya/OneDrive/Documents/kinya-website-svelte/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Not found: /rc/lib/Silika%20Demon%20Charadesign.png
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
at Object.#options.hooks.handle (/@fs/C:/Users/kinya/OneDrive/Documents/kinya-website-svelte/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Not found: /rc/lib/Which%20kind%20of%20thing%20are%20kinya%20projects.png

有没有办法来解决这个问题？ 我将 Svelte + sveltekit 与 Vite（最新）一起使用。

我试图在svelte的源代码中找到问题，但我没有找到任何相关信息（代码太多，我花了太多时间找到）。 就是这样。

Answer 1

好的，我找到了！ 这是

const imgPath = path.slice(2, -3);

我换成了：

const imgPath = path.slice(1, -3);