How to display Portable Text block content images in SvelteKit

I'm trying to render a blog post from Sanity Studio in my SvelteKit project.

Currently, all of the text etc is being displayed, but images within the block content aren't. Below is what I have tried so far:

Here is my /blog/[slug]/+page.svelte file currently:

<script lang="ts">  import { PortableText } from "@portabletext/svelte";  import BodyImage from "$lib/components/BodyImage.svelte";  export let data;  const { post } = data;</script><article><h1>{post.title}</h1><PortableText    value={ post.body }    components={{      image: BodyImage    }}  /></article>

The /blog/[slug]/+page.ts file:

import client from "$lib/sanity/client";export async function load({ params }) {  const { slug } = params;  const post = await client.fetch(    /* groq */ `      *[_type == "post" && slug.current == $slug][0]{        title,        body[]{          ...,          _type == "image" => {            asset,            alt          }        },        author,        publishedAt,        _updatedAt      }    `,    { slug }  );  return { post };}

The BodyImage.svelte component:

<script lang="ts">  import client from '$lib/sanity/client';  import imageUrlBuilder from '@sanity/image-url';  export let value;  const builder = imageUrlBuilder(client);  const imageUrl = builder.image(value.asset).width(800).url();</script><img src="{imageUrl}" alt="{value.alt}" />

How can I get the images to render? There's no errors in my console or anything, and the block content object being retrieved in the main +page.svelte file definitely has the images inside as when I console.log(post), I can see images within the portable text object, along with their asset and alt values. I think the issue may be to do with getting those values to BodyImage.svelte? When I update BodyImage.svelte with these console logs:

<script lang="ts">  import client from '$lib/sanity/client';  import imageUrlBuilder from '@sanity/image-url';  export let value;  console.log("Alt: " + value.alt); // Added this  const builder = imageUrlBuilder(client);  const imageUrl = builder.image(value).width(800).url();  console.log("Image URL:" + imageUrl); // Added this</script><img src="{imageUrl}" alt="{value.alt}" />

Nothing is logged to the console, but I do get this error message:Unknown block type "image", specify a component for it in the 'components.types' prop, although I'm not sure what to do next.

Thanks :)