Not resizing images in DEV mode - SvelteKit

[BillBuilt]

Hello, Having some difficulty getting imagetools to resize properly in dev mode. Works fine in prod mode (npm run build). At first I thought it may be browser caching, but clearing the cache, using private mode, using a completely different browser, restaring the PC, etc.... nothing seems to fix it. It's hashing 2 different urls as expected and the metadata object is reporting the size correctly, but when rendered in the brower, it is the full-sized (original) image.

Here is my svelte.config.js:

import adapter from '@sveltejs/adapter-auto'
import preprocess from 'svelte-preprocess'
import path from "path"
import { imagetools } from 'vite-imagetools'


/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(),
		vite: {
			resolve: {
				alias: {
					$models: path.resolve('./src/models'),
					$lib: path.resolve('./src/lib'),
					$comp: path.resolve('./src/components'),
				}
			},
			ssr: {
				noExternal: ['@fortawesome/free-brands-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-solid-svg-icons']
			},
			plugins: [imagetools({force: true})]
		}
	}
}

export default config

The url for the import: import image from '$lib/assets/stock/1_full.jpg?w=300;1920&metadata'

The img tag: <img src={image[0].src}/>

The metadata:

 [
    {
      format: 'jpeg',
      width: 300,
      height: 200,
      space: 'srgb',
      channels: 3,
      depth: 'uchar',
      density: 300,
      chromaSubsampling: '4:4:4',
      isProgressive: false,
      hasProfile: false,
      hasAlpha: false,
      src: '/@imagetools/332a3a67d70f998a8a8c26556f9e60ab9b1a7fff'
    },
    {
      format: 'jpeg',
      width: 1920,
      height: 1280,
      space: 'srgb',
      channels: 3,
      depth: 'uchar',
      density: 300,
      chromaSubsampling: '4:4:4',
      isProgressive: false,
      hasProfile: false,
      hasAlpha: false,
      src: '/@imagetools/b9f621074cb509f2464a3cb483ccc4d9d40601a2'
    }
  ],

And attached is a screenshot of my browser's inspection console that shows the image with src: '/@imagetools/332a3a67d70f998a8a8c26556f9e60ab9b1a7fff' being displayed at the full resolution as opposed to the 300x200

Not sure what could be happening here....

[rafaucau]

It doesn't work at all in dev mode for me

[salimranainfo]

Same problem here. Its not working in dev mode :-(

[jeffreyvanhees]

Same here but using Vue 3 (not Svelte)

npx vite build --config vite.config.js is going fine:

<div>
   <img src="/build/assets/logo-sub.fcd0b441.webp" class="hidden md:block" height="80" width="80" alt="" />
</div>

but with npx vite --config vite.config.js (dev-server) it generates non-existing URL's for images:

<div>
   <img src="/@imagetools/9c4de2da35107fd57d6053535d0a4b10ee19ed8d" class="hidden md:block" height="80" width="80" alt="" />
</div>

I have no options set in vite.config.js:

plugins: [
   imagetools(),
   ...
],

[benmccann]

I haven't checked the sizing, but the images are definitely showing up in dev mode for me with SvelteKit. You can see it working in dev mode on the SvelteKit and Svelte sites:

• https://github.com/sveltejs/kit/tree/master/sites/kit.svelte.dev
• https://github.com/sveltejs/sites/tree/master/sites/svelte.dev

[benmccann]

If you're still having an issue with this, please share a repository that reproduces the issue. Otherwise I'll close this

[benmccann]

Closing this given the lack of response