Sanity.io+SvelteKit中PortableText图片组件配置求助

1. 编写自定义图片组件 #

在项目中新建src/lib/components/PortableTextImage.svelte组件，复用你已有的urlForImage工具处理图片：

<script lang="ts">
  import { urlForImage } from '$lib/config/sanity';
  export let value: any;
</script>

<div class="my-6">
  <img
    src={urlForImage(value)
      .width(1200)
      .quality(85)
      .format('webp')
      .url()}
    alt={value.alt || '博客文章图片'}
    class="w-full h-auto rounded-lg shadow-md"
    loading="lazy"
  />
  {#if value.caption}
    <p class="text-sm text-gray-600 mt-2 text-center italic">{value.caption}</p>
  {/if}
</div>

2. 在PortableText中配置类型映射 #

修改现有文章组件，导入自定义图片组件并指定给image类型：

<script lang="ts">
  import { urlForImage } from '$lib/config/sanity';
  import { PortableText } from '@portabletext/svelte';
  import PortableTextImage from '$lib/components/PortableTextImage.svelte';
</script>

<div class="prose max-w-none">
  <article>
    <PortableText
      value={post.postContent}
      components={{
        types: {
          image: PortableTextImage
        }
      }}
    />
  </article>
</div>

关键说明 #

• 组件完全适配你提供的Sanity图片数据结构，直接读取alt和asset字段
• 延续封面图的URL生成逻辑，保证图片处理规则统一
• 加入懒加载、样式美化和可访问性优化（必填alt文本）
• 可选支持图片标题（若你的Sanity schema配置了caption字段）

内容的提问来源于stack exchange，提问作者Ruben Rossvold