SvelteKit - Asset Handling: Transformed .webp image not found on nested route in Production/Preview

I am loading the transformed .webp image on /about-us/social-responsibilities page. I referred https://k开发者_如何学Goit.svelte.dev/docs/assets#caching-and-inlining for loading assets.

Everything works fine when I run the npm run dev, but transformed images return 404 when I run npm run preview or when I deploy it on vercel.

<script>    
import supportImg from '$lib/assets/images/we-support-farmers-soldiers.jpg?webp';
</script>

<div>
<img src={supportImg} loading="lazy">
</div>

The image returns 404 because it tries to load it from /about-us/_app/immutable/assets/we-support-farmers-soldiers-17dde5c7.webp. It will work fine if it loads the image from /_app/immutable/assets/we-support-farmers-soldiers-17dde5c7.webp. But I am not able to find the way to do it.