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 :)

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 :)

• javascript
• svelte
• sveltekit
• sanity
• groq

1 Answer 1

I went into the source code of PortalableText: , components param accept an object that is of PortableTextComponents type. PortableTextComponents is declared here and it is Partial<PortableTextSvelteComponents>. PortableTextSvelteComponents doesn't seem to accept a field called image.

It seems like you are trying to use a custom type, this may help: https://github/portabletext/svelte-portabletext?tab=readme-ov-file#customizing-rendering