Image

Example

Usage

Image component uses Svelte’s enhaced image feature to auto-optimize and compress images based on device size.

This is the recommended way to link images.

Store images in: src -> content -> images

<script>
    import Image from '$lib/dist/components/Image.svelte';
</script>

<Image path='images/social.png' alt='svelte-starter-kit' />

You can store the images in blog and docs directory as well. Below is the list of all the places where it would look for the image:

[
    // site-wide images
    `/src/content/images/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}`,
    // blog
    `/src/content/blog/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}`,
    `/src/content/blog/*/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}`,
    // docs
    `/src/content/docs/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}`,
    `/src/content/docs/*/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}`,
    `/src/content/docs/*/*/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}`,
]

Table of Contents

Example

Usage