Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Need help]: Images are processed but not outputted #115

Open
moritzebeling opened this issue May 16, 2021 · 2 comments
Open

[Need help]: Images are processed but not outputted #115

moritzebeling opened this issue May 16, 2021 · 2 comments

Comments

@moritzebeling
Copy link

moritzebeling commented May 16, 2021

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!

@moritzebeling moritzebeling changed the title Generated images, correct height missing [Need help]: Images are processed but not outputted May 16, 2021
@Rullflex
Copy link

Rullflex commented Mar 9, 2022

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

@Pubudu-Basnayaka-COS
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants