[Need help]: Images are processed but not outputted

[moritzebeling]

Thank you very much for this promising plugin. Unfortunately I have a hard time getting it to run, maybe someone can help me? I just started with a fresh Rollup + Sapper template and only installed Netlify CMS.

My Rollup config (reduced to only svelte-image related stuff):

import image from "svelte-image";
const preprocess = [
  image({
    sizes: [400, 800, 1200],
    outputDir: "g/",
    publicDir: "./static/",
    processFolders: ['./uploads'],
    processFoldersSizes: [400, 800, 1200]
  })
];
export default {
  client: {
    plugins: [
      svelte({ preprocess })
    ]
  }),
  server: {
    plugins: [
      svelte({ preprocess })
    ]
  }),
};

My svelte component...

<script>
  import Image from "svelte-image";
  let image = '/uploads/my-image.jpg';
</script>

<!-- using component -->
<Image src={image} alt="Image by url" />

<!-- using html string -->
{@html `<img src="${image}" alt="Image inside html" />`}

...results in:

<!-- using component -->
<div class="wrapper svelte-142y8oi" style="min-height: 100px; width: 100%;">
  <div class="svelte-ilz1a1 loaded" style="position: relative; width: 100%;">
    <div style="position: relative; overflow: hidden;">
      <div style="width: 100%; padding-bottom: 100%;"></div>
      <img class="placeholder svelte-ilz1a1 blur" src="/uploads/my-image.jpg" alt="Image by url">
      <picture>
        <source type="image/webp" srcset="" sizes="(max-width: 1000px) 100vw, 1000px">
        <source srcset="" sizes="(max-width: 1000px) 100vw, 1000px">
        <img src="/uploads/my-image.jpg" class="main svelte-ilz1a1" alt="Image by url">
      </picture>
    </div>
  </div>
</div>

<!-- using html string -->
<img src="/uploads/my-image.jpg" alt="Image inside html">

The image is being reduced to the desired sizes and appear in the static folder, like static/g/uploads/my-image.400.jpg. Also both images show up in the browser, but only the original file, not the reduced thumbs. While the component creates that huge block of markup without the srcset and with the wrong height, the image that comes from a string of html is not processed at all.

What am I missing? Thanks for any help!

[Rullflex]

Did you manage to solve this problem? I've the same one

[Pubudu-Basnayaka-COS]

Ever figure out the issue? I'm running into same issue, using sveltekit, when I manually put in image source it works, but using any sort of variables for the image source causes the output to mess up