PNG image shows unexpected background

[haub94]

Hi there,
im try to use the svelte-img to show some png images (without background) in a svelte+tailwind project.
Therefore Im import the image with the the following line:
import logo4 from "$lib/managedImages/logos/shopgate_medium.png?run&format=png";
But the result is the image with a chessboard-like background.

So I thought it was the LQIP and wanted to disable it with the parameter lqip=0. (I loaded the page with throttling and saw as the first loaded content the unwanted background)
import logo4 from "$lib/managedImages/logos/shopgate_medium.png?run&format=png&lqip=0";
But with this change, the image is no longer displayed.

Could you please tell me what im doing false?

Here are the most important code snippets:
package.json:

"@zerodevx/svelte-img": "^1.2.10",
"@sveltejs/kit": "^1.0.1",
"tailwindcss": "^3.3.2",

+page.svelte

<script>
  import Img from '@zerodevx/svelte-img';
  import TestimonialCard from './TestimonialsCard.svelte';
  import logo4 from "$lib/managedImages/logos/shopgate_medium.png?run&lqip=0&format=png";
</script>

<TestimonialCard>
  <div slot="logo">
    <Img 
      src={logo4}
      alt="logo"
      class="mx-auto h-16"
      width=170
      height=170
    />
  </div>
</TestimonialCard>

vite.config.js

plugins: [
  sveltekit(), 
  imagetools({
    defaultDirectives: () => new URLSearchParams('?width=700&format=jpg;png&withoutEnlargement&withoutReduction')
    })
],

If necessary, I can create a repo to reproduce the behavior. :)

[zerodevx]

Hey there, sorry for the late reply. It seems your original image has a transparent background - if that's the case, then yes, the artefacts are probably due to the LQIP.

So I thought it was the LQIP and wanted to disable it with the parameter lqip=0.

I just cut a v2 release - there are breaking changes, so your import statement should be changed to:

// disable lqip
import logo4 from "$lib/managedImages/logos/shopgate_medium.png?format=png&as=run:0";

Correspondingly, defaultDirectives in vite.config.js should be renamed to runDefaultDirectives.

Try this again with v2 and let me know how things go.

[haub94]

I had some days off, so the delay was not a problem.

With the v2 and your instructions it works fine!

Its sad i tell it at the end, but better late then never: i thank you for this amazing tool and your work! :)