Image in footer does not load on client-side routing

[carstenjaksch]

This is weird. I have an image component in the footer (+layout.svelte) that throws a 404 on client-side routing (clicking on a link with an internal route):

GET http://localhost:5173/false 404 (Not Found)

This is the component:

<script lang="ts">
	import { getContext } from 'svelte';
	import type { ImageObj } from '$lib/types';

	const index: number = getContext('index');
	let loading: 'eager' | 'lazy' = 'eager';
	if (index > 0) {
		loading = 'lazy';
	}

	export let img: ImageObj;

	if (!img.atts.srcset) {
		delete img.atts.srcset;
	}

	let classes = '';
	export { classes as class };
</script>

<svelte:head>
	{#if index === 0}
		<link rel="preload" as="image" href={img.lowres} />
	{/if}
</svelte:head>

<!-- svelte-ignore a11y-missing-attribute -->
<img
	{...img.atts}
	class="bg-contain bg-center bg-no-repeat italic {classes}"
	{loading}
	style="background-image: url({img.lowres})"
/>

<style lang="postcss">
	img {
		shape-margin: 1rem;
	}
</style>

The image data is fetched from an API. This is how I fetch and feed the data to +page.svelte and +layout.svelte:

+layout.server.ts

export const load: LayoutServerLoad = async ({ params, fetch }) => {
	const path = params.path;

	if (path !== undefined) {
		const slug = path === '' ? 'home-api' : path.substring(path.lastIndexOf('/') + 1);
		const pageRes = await fetch(`${FETCH_URL}/wp/v2/pages?slug=${slug}`);
		const page = await pageRes.json();

		if (page.length > 0 && page[0].status === 'publish' && page[0].acf.content !== undefined) {
			return {
				page: page[0]
			};
		}
	}

	error(404, 'Not Found');
};

+layout.ts

export async function load({ data }): Promise<{
	content: { [key: string]: string | object };
	components: { [key: string]: ComponentType<SvelteComponent> };
	footer: { copy: [HTMLObj]; image: ImageObj };
}> {
	if (data) {
		const { content } = data.page.acf;

		if (content) {
			let components: { [key: string]: ComponentType<SvelteComponent> } = {};

			for (const layout of content) {
				try {
					components[layout.type] = (
						await import(`$lib/components/layouts/${layout.type}.svelte`)
					).default;
				} catch (error) {
					continue;
				}
			}

			return {
				content,
				components,
				footer: data.page.footer
			};
		}
	}

	error(404, 'Not Found');
}