not working with sveltekit about imagetools

[KocsisGabor]

I think Image is the src in your case so you should use

<img src="{Image}">

If you need metadata which can return the image as an object then you should import this way:

import Image from '../../static/test.jpg?w=400&metadata';

In the above case Image will be an object with an src attribute so you can use {Image.src} with metadata.

[KocsisGabor]

I'm sorry @parence I was mistaken when I said I have essentially the same setup, I didn't notice one important difference: The vite config object should go into the kit object, so it should be:

const config = {
    preprocess: preprocess(),
    kit: {
        adapter: adapter(),
        vite: {
            plugins: [imagetools()]
        }
    },
};

PR would be an overkill for this. Also, I actually only noticed this mistake when I cloned your minimal repo and VSCode underlined that part in the config as a problem, I think it's worth setting up a code editor to do things like that, it can save you a lot of time.

Maybe the same mistake is present in your config @yndotdev?

[parence]

Thank you for your explanations and suggestions!

I tried

<img src="{Image}">

as you suggested and I can confirm that while using this approach the image is displayed. However, the transformations don't seem to be applied (i.e. in the above example image's width is not 400, it's still in its original resolution).

I also tried adding &metadata and Image is still a string (not an object as expected).

Something seems broken in the set up I posted above, which is just bare bones sveltekit + imagetools. But I don't see any errors during build. Is there something else I need to configure?

[KocsisGabor]

I have essentially the same setup and I use it the same way (except I use the ?meta shorthand and I use $static/ instead of the relative path).

Try imagetools({ force: true}) in the vite config, that is a deprecated option which in the past enabled the plugin in dev mode. Or try a different version (I use "vite-imagetools": "^4.0.3").

Sorry I couldn’t help more, your setup should work.

[JonasKruckenberg]

The explanation @KocsisGabor gave it correct, so appending &metadata should return you an object with a number of properties (src is one of them) while normally you get a string - the url to the transformed image.

If you @parence could share a quick minimal repro of your issue I can have a look.

[parence]

Thanks @KocsisGabor, I have tried with {force: true} but without any success. I'm also using the same version as you.

@JonasKruckenberg I have pushed a skeleton project here: https://github.com/parence/imagetools-sveltekit

[yndotdev]

I have the same issue as @parence w/ Sveltekit. I am also using version ^4.0.3

[parence]

@KocsisGabor you are absolutely right. That solved it for me!
I misunderstood the sveltekit docs concerning the svelte config. Do you mind sharing how you configured your linter? I have eslint configured in my project and it definitely complains when I introduce other errors in my svelte.config.js. However, in this case it remained completely silent.

Thanks!

[JonasKruckenberg]

Glad you guys figured it out! 👍🏻

[KocsisGabor]

@parence, These kinds of errors are reported by the ts language server on my machine which I believe is turned on by default in VSCode.

I actually tried to find the relevant config but I just couldn’t, even when I removed everything (tsconfig.json, .eslintrc.cjs, jsconfig) and even turned off everything in vs code settings that seemed relevant it still showed me this error (also the error was present on the skeleton project so I’m sure it’s some setting in VSCode).
The only other thing I can think of is maybe VSCode needs typescript to be installed globally.

npm install -g typescript