Optimized pictures cannot be found for blog post cover pictures in preview

[vvirta]

This is very likely user error, as I'm not too experienced. I will record it in any case, so that the eventual fix will be visible to others.

I have edited the template here and there, added blog posts and now it got ready for first deployment. I have tested so far only with pnpm dev. When i ran pnpm run buildand pnpm previewfor the first time I came up with an issue where cover pictures or picture that I replaced the Svelte-logo in about section of landing page are not visible.

When firing the preview, I get these error messages:

NotFound [Error]: Not found: /images/posts/library.avif
    at resolve2 (file:///Users/me/Projects/virtaavaa/.svelte-kit/output/server/index.js:2895:18)
    at resolve (file:///Users/me/Projects/virtaavaa/.svelte-kit/output/server/index.js:2722:34)
    at #options.hooks.handle (file:///Users/me/Projects/virtaavaa/.svelte-kit/output/server/index.js:2961:71)
    at respond (file:///Users/me/Projects/virtaavaa/.svelte-kit/output/server/index.js:2720:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404
}

In my static/images/posts -folder I have eg. jpeg or png version and blog posts that refer to those directly in content show the pictures ok. the build/images/posts -folder has all the different picture formats available, but when I visit localhost:4173, those pictures return error message and cannot be found. When inspecting one missing image I see this:

<img srcset="/images/posts/library.avif, /images/posts/library.webp, /images/posts/library.png" src="/images/posts/library.jpeg" alt="Second Brain" loading="lazy" decoding="async" class="svelte-1ykl0dj">

The original version of the image works: http://localhost:4173/images/posts/library.jpeg but all other formats return error.

[ddogfoodd]

If I remember correctly, I ran into a similar problem recently because I had updated npm. Maybe try to downgrade npm if you are not on stable.

[matfantinel]

@vvirta what happens if you run the optimize-images command by itself (npm run optimize-images)? Does it generate the webp and avif files?

If it does, then maybe the issue is likely with the “postbuild” script not running. If that’s the case, then there wouldn’t be a sitemap.xml file in the build folder.

I’ve never used pnpm, but I don’t think it should affect the build process…

You can also try running the build and preview commands with npm instead and see if that works, just for peace of mind

[vvirta]

Sorry for long delay. Trying again to troubleshooting today. (tldr) Investigation status. No answers, no questions(/tldr)

• I originally changed to pnpm almost accidentally believing, that it is more or less same as npm.
  • If you do the change, please note that package.json has npm references, that need to be fixed...
• I fixed those, but didn't get it working still
• Then I reverted back to npm and couldn't make it work
• Optimize-images works well. I find all the images in different formats from build/images/...

I believe I do not understand some fundamental topic around vite/preview/build now.

• As I do not find images through URL I started to investigate what folders am I actually seeing rendered in preview.
• I believe in preview I should see build-folder where all different format pictures are
• As I see pictures in blog body (where I directly link to original .png) I decided to test with renaming those to see what images get impacted. The target was to make sure that I do actually see build-folder contents and not the static
• To my surprise images are visible in blog texts and with direct links even after I remove them from both static & build folders. Next clue is then to get more visibility to what vite is really showing me in preview.

[vvirta]

Using npm fixed my issue of deploying to production and now I can see that all the cover pictures are working there. DEV works, PREVIEW doesn't and PROD works. At the moment I have no issues testing in production so will likely suspend solving this issue, until I learn a bit more of the basics...

[marksteven]

Just a note I think is correct - someone can correct me if not - If you place pictures in static folder Svelte does not process them at all using as is. Im also playing with this project and finding pictures are disappearing if used from "static" folder in localhost . Yet visible in Front Matter Dashboard.

[matfantinel]

@marksteven only images in the /static/images folder will be processed, but you can change that if you need. What runs the optimization is the "optimize-images" script in package.json.

[vvirta]

I returned back to this issue while investigating something else, and found the following post after asking ChatGTP to explain me the difference between /.svelte-kit/output and /build: https://github.com/sveltejs/kit/issues/10734 As it seems the npm run preview runs on top of the .svelte-kit folder while the optimize-images only targets build folder. My quick and dirty solution was to edit package.json:

...
"optimize-images": "image-transmutation --run --sourceFolder './build/images' --targetFolder './build/images' --inputFormats 'jpg' --inputFormats 'jpeg' --inputFormats 'png' --outputFormats 'png' --outputFormats 'webp' --outputFormats 'avif'",
"optimize-images2": "image-transmutation --run --sourceFolder './.svelte-kit/output/client/images' --targetFolder './.svelte-kit/output/client/images' --inputFormats 'jpg' --inputFormats 'jpeg' --inputFormats 'png' --outputFormats 'png' --outputFormats 'webp' --outputFormats 'avif'",
"postbuild": "npm run optimize-images && npm run optimize-images2 && svelte-sitemap --domain https://virtaavaa.netlify.app",
...