Svelte replaces $lib by "rc" instead of "src" | Error: Not found: /rc/lib/Silika%20Demon%20Charadesign.png

Question

I have a problem with Svelte. I've put my images in the src/lib folder. As same as the title there is this error. Here is my code :

components/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 folder (as the image)image of my filesystem

routes/+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>

And I got this error: Every time it load, an error occurs:

> /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

Is there a way to fix this ? I use Svelte + sveltekit with Vite (latest).

I tried to find the problem in source code of svelte, but I found nothing about this (There is too much code, I took too much time to find). So here is it.

Answer 1

OK I FOUND IT ! It was the

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

I replaced to it :

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