How to use local static images in Svelte

Question

I was following the tutorial (https://svelte.dev/tutorial/dynamic-attributes) to import local image files. But it didn't work. The image was not found in the app.

Where do I need to locate these images in order to make it works as in tutorial?

let src = './images/background.jpg'
.
.
.
<img {src} alt="background image" />

The browser showed Image not found.

Answer 1

Put your images folder in public folder then reference like this:

<img src="images/background.jpg" alt="background image" />

Or

let src = "images/background.jpg";
.
.
.

<img {src} alt="background image" />

Answer 2

Here is another way to use images in svelte:

.banner-container {
    background-image: url("/images/hero-banner.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

Answer 3

The local images you will use need to be referenced as relative to the index.html file in the public folder. So in your case:

let src = './images/background.jpg'

background.jpg would need to be in a folder called "images" inside the "public" folder.

You could just reference it as let src = 'images/background.jpg'

Answer 4

For sveltekit

Assume I have a file src/lib/assets/icon.png

In order to import it:

<script>
   import Icon from "$lib/assets/icon.png"
</script>

<main>
this is a download icon.
<img src={Icon} alt="download icon"/>

</main>