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 33 · Answer 1 · answered Jul 13 '19 at 12:46

33

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 6 · Answer 2 · edited Apr 12 '20 at 00:50

6

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

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

5

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

3 Answers3