Where to put images with SvelteKit

In SvelteKit, managing static resources such as images, CSS files, and fonts is typically done by placing them in the static directory of the project. The key point is that files within this directory are served as static files by SvelteKit, meaning they can be accessed directly via simple URLs.

How to Proceed:

1. Create the static folder: If the static directory does not exist in your SvelteKit project, you need to create it manually. This directory should be located at the root of the project.

2. Store images: Place your image files in the static directory. For example, you can place an image named example.jpg in the static/images subdirectory.

3. Reference images in Svelte components: In your Svelte files or HTML, you can reference the image using a path relative to the root of the website. For example:

html
<img src="/images/example.jpg" alt="Example Image">

Example:

Suppose you are developing a blog website and need to insert some images into articles. You can follow these steps:

1. Image storage: Store all article images in the static/images/posts directory. For example, an image with the path static/images/posts/article-1-header.jpg.

2. Use images in Svelte components: In your article component, you can insert the image like this:

html
<script>
  export let headerImage = '/images/posts/article-1-header.jpg';
</script>

<img src={headerImage} alt="Blog Post Header">

By doing this, your static resource management structure is clear and easy to maintain, and it also facilitates optimization through CDN to improve website loading speed.