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! :)