SvelteKit中如何渲染Portable Text区块内容里的图片

云上老周

2026-4-13

嗨，我看了你遇到的问题，其实错误提示已经把关键点明明白白告诉你啦！你收到的Unknown block type "image", specify a component for it in the 'components.types' prop，核心问题就是你把图片组件的配置位置放错了。

问题根源

你现在直接在PortableText组件的components根对象下写image: BodyImage，但Portable Text的自定义类型组件（比如你这种_type为image的区块），必须放在components.types这个嵌套对象里，而不是根层级。

修正步骤

调整+page.svelte里的PortableText配置
把组件配置改成包含types的结构，这才是正确的自定义类型组件配置方式：

<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={{
      types: {
        image: BodyImage
      }
    }}
  />
</article>

修复BodyImage.svelte的图片URL生成逻辑
我注意到你之前写了builder.image(value)来生成URL，但这里应该传入value.asset（毕竟你的GROQ查询已经拿到了图片的asset对象），修正后的组件代码：

<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}" />