Search code examples
svelterollupsveltekitsvelte-component

importing images from svelte component library

I have created a svelte component library that has some images in it.

lib
└ static
  └ Dog_1.png

this is then referenced in an image tag

<img src="Dog_{Math.floor(Math.random() * 30)}.png" />

It works fine and the image shows up in storybook.

But the issue/question is: How do I get this to work in the package that imports this component library (a sveltekit project)?

I've tried adding the images as a static folder in rollup, so they show up in the dist folder of the library, but I can't seem to find any documentation for how to get them from there to the app/vite

Solution

  • A simple way to include images in svelte-kit is to import the image in the script tag:

    <script>
import logo from './svelte-logo.svg';
</script>

<img src={logo}/>

    This functionality comes from Vite (documentation).

    I hope this is what you where looking for.