logo

How to use images from the static folder in Svelte

––– views

1 min read

Recently I've started to learn and use Svelte, since it's a fairly new framework I've ran into lots of issues. I am planning to address each of them individually. In this article, I will show you what you need to configure in order to use the static folder (or any other folder) to store and use your images.

I added the image in the static folder and when I tried to use it I got this error

Error: GET http://localhost:4000/static/logo.png 403 (Forbidden)

And this one

The requested resource is outside of Vite serving allow list.

Although is not clear from these messages what you need to do is to add the following config to

JS svelte.config.js
const config = {
    // YOUR OTHER COFIGURATION....
	kit: {
		vite: {
			server: {
				fs: {
					allow: ["static"]
				}
			}
		}
	},
	target: '#svelte'
    // YOUR OTHER COFIGURATION....
};


export default config;

Notice the word static, this tells Svelte which folders are on the allowed list, you may extend it to fit your needs Now all you need to do to import an image is the following.

HTML index.svelte
<img src='/static/logo.png' />

That's all, hope it helps.

To comment please authenticate