images in subfolders within `static` throw an error (Sveltekit)

[shot-codes]

i have a sveltekit app with my images in static/images/, and would like to organize them in in sub directories. However when I move files into directories I'm met with the following error Error while preprocessing ... Input file contains unsupported image format

<!-- This works with the file `/static/images/01.png` -->
<Image src="/01.png" />

<!-- This doesn't work with the file `/static/images/some-folder/01.png` -->
<Image src="/some-folder/01.png" />

// svelte.config.js

imagePreprocessor({
  inputDir: "static/images",
  outputDir: "static/images/g",
  publicPath: "/images/g",
  webp: true,
  avif: true,
})

[shot-codes]

🤦 Restarting the dev server fixed it

[shot-codes]

🤦 🤦 False false alarm. I am indeed having this issue.

[xiphux]

Do you have a reproduction I could look at?

[developer2346]

Having the same issue

[shot-codes]

Sorry for the delayed response. By deleting the generated files and regenerating them everything works as expected. Will leave this open for @developer2346.

[SirNovi]

I had this same issue after adding a width to a file that worked before. Deleting the generated files, checking the write permissions of the folder for the generated images and restarting the dev server fixed it. For now at least.

[JP-Ellis]

I just stumbled upon the same issue, so I think it is a really issue. ~My hypothesis is that the generated images are not picked up by vite(?) which is causing the error, and the server restart fixes this as it discovers the previously generated files.~

I think the issue is much simpler than that: The src attribute of Image links to a path within the configured inputDir and then produces an output with the full outputDir. As the outputDir is within /static it produces the following error:

files in the public directory are served at the root path.
Instead of /static/img/headshot.[...].avif, use /img/headshot.[...].avif.
// omitted
The request url "/static/img/headshot.[...].avif" is outside of Vite serving allow list.

If it is of any help, here are my svelte.config.js and vite.config.ts (though they are very standard).

svelte.config.js

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/kit/vite";
import { imagePreprocessor } from "svimg";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: [
    imagePreprocessor({
      inputDir: "static/images",
      outputDir: "static/img",
      webp: true,
      avif: true,
    }),
    vitePreprocess(),
  ],

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
  },
};

export default config;

vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [sveltekit()],
  test: {
    include: ["src/**/*.{test,spec}.{js,ts}"],
  },
});

[futantan]

Sorry for the delayed response. By deleting the generated files and regenerating them everything works as expected. Will leave this open for @developer2346.

I used another computer which contains the old generated image assets, and got the same issue. it works for me after deleting all the generated files