Search code examples
pathsveltesveltekit

Svelte path to a static folder

I use Sveltekit and put some images in my static folder. Static > images > image1.png etc.

Within source, src, I have a folder called lib and inside lib a folder called components and in there a file Footer.svelte. In that file I want to reference to my image1 (which has an absolute path of ~/myapp/static/images/image1.png. Even when I try this path it throws me an error.

So: src > lib > components > Footer.svelte

static > images > image1.png

Both src and static are in root dir of myapp.

And this line in my Footer.svelte: import Image from '~/myapp/static/images/image1.png';

Whats the correct line in my Footer.svelte for grabbing image1.png?

See in problem description.

Solution

  • Files in static are not supposed to be imported, they should be available as static files directly on the root of the application so you can reference them as:

    <img src="/images/image1.png" />

    If you want to import an image, I would suggest putting it in src/lib and import from there via:

    import image from '$lib/.../image1.png';

    <img src={image} ... />

    This also adds a hash to the asset in the build output, making sure that the cache is invalidated if the content of the image changes later. Would only use the static directory for things like robots.txt which requires a fixed path.

    (The mapping of the $lib alias is created by SvelteKit, one can also configure additional aliases. There is also a files config where one can change the path of lib and other directories. You also can import from other locations, e.g. put the image next to other files of a route if it is specific to that route.)