CODEWITHSUNDEEP
imagesveltekit
Anders
Anders

Reputation: 1077

Where to put images with SvelteKit

I have been using Svelte for a little while and now I have switched to SvelteKit so I can add multiple pages. I want to add some images to my site but I don't know where to put them. In Svelte I would just put them in public/images but there is no public folder with SvelteKit (I set it up with npm init svelte@next my-app if that matters).

Would I put them in static?

Upvotes: 43

Views: 53162

Answers (5)

sk shahriar ahmed raka
sk shahriar ahmed raka

Reputation: 1179

As Sveltekit uses Vitejs, there is a easy solution mentioned in Vitejs official web site (Click Here).
First inside the script tag :

<script>
const imgUrl = new URL('./img.png', import.meta.url).href
</script>

then inside your Image tag just use that variable,

<img src="{imgUrl}" alt="" />

or,

<div class=" h-screen w-full" style="background-image: url('{bgUrl}') ;">
</div>

You can import static images from any relative path.

Upvotes: 6

Shivang Gupta
Shivang Gupta

Reputation: 3331

As per svelte documentation, it should be inside static folder. It will work fine when the application is running on the root of the server but if your application is running on different route, you have to set the base path in your svelte.config.ts file.

Ex: Site is hosted on kubernetes(or any other container) and is being referenced by CDN(say cloudflare) and in CDN you have configured a dns(myapp.mydomain.com) that is pointing to API gateway.You want your site to run on myapp.mydomain.com/MY_SITE, then images served from static folder will not work. Because there will be a path mismatch. Always use base from svelte.config.ts under these situations.

Another option is to add your assets in lib folder as discussed by @brian here: https://stackoverflow.com/a/75191716/2366637

Upvotes: 1

Brian Morearty
Brian Morearty

Reputation: 3348

I recommend putting images under src/lib, not static. For example you could make a src/lib/images or src/lib/assets folder and put them there.

The reason is performance:

For files imported from anywhere under src, at compile time Vite adds a hash to the filename. myImage.png might end up as myImage-a89cfcb3.png. The hash is based on the image contents. So if you change the image, it gets a new hash. This enables the server to send a very long cache expiration to the browser, so the browser can cache it forever or until it changes. It's key-based cache expiration, which IMO is the best kind: cached exactly as long as it needs to be. (Whether the server actually sends the right caching headers in the response may depend on which SvelteKit adapter you use and what host you're on.)

By contrast, images under static don't have a hash added to their name. You can use the static directory for things like robots.txt that need to have a specific filename. Since the filename stays unchanged even if its contents change, these files by necessity end up having a cache-control value that includes max-age=0, must-revalidate and an etag, which means even if the browser caches the image it still has to make a server round-trip to validate that the cached image is correct. This slows down every image on your site.

Usage:

When putting images under src/lib, you reference them like this:

<script>
import img from '$lib/images/img.png';
</script>

<img src={img} alt="Image" />

I recommend simplifying by adding svelte-preprocess-import-assets to your project, which automates the process of importing images and cleans up your code. You write the following and it generates the code above:

<img src="$lib/images/img.png" alt="Image" />

Upvotes: 77

nussknagger
nussknagger

Reputation: 1

there is also svelte-image.

"Svelte image is a pre-processor which automates image optimization using sharp.

It parses your img tags, optimizes or inlines them and replaces src accordingly. (External images are not optimized.)

Image component enables lazyloading and serving multiple sizes via srcset.

This package is heavily inspired by gatsby image.

Kudos to @jkdoshi for great video tutorial to Svelte Image."

-https://github.com/matyunya/svelte-image

Upvotes: -3

Anders
Anders

Reputation: 1077

I added the images in static/images and referenced them with src="/images/photo.jpg" like @b2m9 said and it works perfectly.

Upvotes: 46

Related Questions