Search code examples
javascriptsveltesapper

Loading an Image in Sapper/Svelte

I am running a sapper simple code for a blog. To load an image I use

<script>
import cactus from 'images/cactus.jpg';
  import PostList from '@/components/PostList.svelte'
  import {posts} from '@/posts'

</script>

The problem is that the image never loads from /static/images but only if is inside /src/node_modules/images

This causes all sort of problems with deployment. It is not a problem to do an export locally but a remote deploy will fail as the /src/node_modules/images is probably in git ignore.

How can I load the images as it should be from /static/images ?

Solution

  • Place your images in your ./static folder and for example, you want to use them on your page

    <img src="./logo-512.png" alt="" />

    logo-512.png comes default with your sapper template (try doing this)

    if you organize your images inside ./static/images/ then do this

    <img src="./static/images/image.jpg" alt="" /> this will work.