Issues with Changing Default Directives

[Bobby Crotty]

Hello, I'm having several issues when I try to change the default parameters. Here's my vite.config.js:

import { sveltekit } from "@sveltejs/kit/vite";
import { imagetools } from "@zerodevx/svelte-img/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    sveltekit(),
    imagetools({
      // By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
      // Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
      defaultDirectives: () =>
        new URLSearchParams("?width=480;1024;1920&format=avif;webp;jpg"),
    }),
  ],
});

When I run with that, I get this error:
vite-imagetools cannot find image with id "60799328ade7a85a8dbd20236fcebe9be04e5390," this is likely an internal error

If I add "run" ("?run&width=480;1024;1920&format=avif;webp;jpg"), it starts working, but now any normal images that aren't using your import syntax & Img tag don't work.

If I add "lqip=0" ("?run&width=480;1024;1920&format=avif;webp;jpg&lqip=0"), I get an error:
r is not a function

Thanks for the help!

[Gabriel Uhlíř]

Yes, me too... trying out all sort of Libraries using vite-imagetools and it seems this might be a bug in the core library itself?

[Jason Lee]

It's probably due to this: JonasKruckenberg/imagetools#585

You shouldn't install vite-imagetools as a dependency yourself; this repo pins imagetools to a working version, so just install this alone and let the repo handle versioning.

[Bobby Crotty]

I didn't install vite-imagetools myself.

[Ben McCann]

I cut a new release of vite-imagetools with a fix for JonasKruckenberg/imagetools#585. Pinning wouldn't help because the bug was imagetools core, which vite-imagetools depends on in a non-pinned manner.

[Jason Lee]

@benmccann Thanks for the info! 🙏

[Jason Lee]

This should be fixed in the latest v2 release. There are breaking changes, but should be trivial to migrate. Let me know how things go!

[Bobby Crotty]

@zerodevx v2 works nicely. One question. Is it possible to disable the lqip in the default directives? I'm running into an issue on my site where the lqip background style, which fills the whole available area, is still showing under the normal image, which is limited in size due to object-fit.

[Jason Lee]

Is it possible to disable the lqip in the default directives?

In v2, runDefaultDirectives needs the explicit ?as=run to trigger, so no. You can however use the standard defaultDirectives though:

// vite.config.js
...
export default defineConfig({
  plugins: [
    sveltekit(),
    imagetools({
      defaultDirectives: new URLSearchParams('w=480;1024;1920&format=avif;webp;jpg&as=run:0')
    })
  ]
})

Then just import the source without params:

<script>
  import src from '$lib/a/cat.jpg'
  import Img from '@zerodevx/svelte-img'
</script>

<Img {src} />

[Jason Lee]

Marking this as fixed. Feel free to reopen.