Open vvirta opened 6 months ago
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.
@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
Sorry for long delay. Trying again to troubleshooting today. (tldr) Investigation status. No answers, no questions(/tldr)
I believe I do not understand some fundamental topic around vite/preview/build now.
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...
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.
@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.
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",
...
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 ranpnpm run build
andpnpm preview
for 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:
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.