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.

Can you show your directory structure? – Dawid Sawa Jul 05 '19 at 15:06 — Dawid Sawa, Jul 05 '19 at 15:06

score 42 · Answer 1 · answered Jul 13 '19 at 12:46

42

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" />

answered Jul 13 '19 at 12:46

Hadi

score 19 · Answer 2 · answered Aug 02 '22 at 09:08

19

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>

answered Aug 02 '22 at 09:08

Rajodiya Jeel

If the project is using vitePreprocess then it can also parse CSS url("$lib/assets/icon.png") see sveltekit documentation on [Assets Handling](https://kit.svelte.dev/docs/assets) – Athanassios Apr 02 '23 at 21:04

score 9 · Answer 3 · edited Apr 12 '20 at 00:50

9

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;
}

edited Apr 12 '20 at 00:50

colidyre

answered Apr 12 '20 at 00:06

Luis

1

Is this the preferred way to use images in Svelte? This is the only way I'm able to link to images. Doing it from JS, like the top rated answer, doesn't work for me. – HaulinOats Sep 21 '21 at 16:05
Worked for me, thanks! – BMB Nov 02 '21 at 18:30
Thanks for that idea - works perfectly! (I put it in the global.css) – Timo Jun 29 '22 at 22:13
This assumes images are at /images. A static svelte app should run anywhere, for instance at /theirserver/theirapps/myapp and then the images should come from /theirserver/theirapps/myapp/images. Why should the programmer decide the images should reside at theirserver/images in production? – anneb Apr 18 '23 at 14:19

Andrew1325 · Answer 4 · 2020-05-05T08:08:04.883

8

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'

edited May 05 '20 at 08:08

answered Jul 05 '19 at 04:19

Andrew1325

sk shahriar ahmed raka · Answer 5 · 2022-07-15T11:55:14.023

5

If you are using vitejs/Sveltekit, 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>

edited Jul 15 '22 at 11:55

answered Jul 14 '22 at 17:59