如何在Sanity Portable Text中正确渲染图片

默认Portable Text渲染器仅内置文本块（block）、文本片段（span）等基础文本节点的渲染规则，未配置_type: "image"类型节点的映射逻辑，解析到图片节点时会直接跳过，导致图片无法展示。

• 第一步：生成图片可访问地址
  返回数据中图片节点的asset._ref是Sanity资源的固定标识，格式为image-[资源ID]-[宽度]x[高度]-[文件后缀]，可以直接按规则拼接CDN访问地址，示例解析逻辑：

// 传入image节点下的asset对象即可
const getSanityImgUrl = (asset) => {
  if (!asset?._ref) return ''
  const [, assetId, size, format] = asset._ref.split('-')
  const [width, height] = size.split('x')
  // 将前缀替换为自己项目对应的Sanity CDN项目路径
  return `https://cdn.sanity.io/images/[你的项目ID]/[你的数据集名]/${assetId}-${width}x${height}.${format}`
}

如果项目中已经引入了Sanity官方的图片URL处理工具，也可以直接用工具生成带裁剪、压缩参数的地址，无需手动拼接。

• 第二步：添加image类型的自定义渲染映射
  所有框架下的Portable Text渲染包，核心配置逻辑一致：在组件映射规则中声明image类型对应的渲染组件，以React生态常用的@portabletext/react为例：

import { PortableText } from '@portabletext/react'

// 自定义图片渲染组件
const PortableTextImage = ({ value }) => {
  const imgSrc = getSanityImgUrl(value.asset)
  if (!imgSrc) return null
  // 如果图片配置了alt、说明文字等字段，直接从value中取值传入即可
  return <img src={imgSrc} alt={value.alt || ''} loading="lazy" />
}

// 渲染时传入类型映射配置
<PortableText
  value={/* 接口返回的Portable Text完整数组 */}
  components={{
    types: {
      image: PortableTextImage
    }
  }}
/>

如果使用Vue、Svelte等其他框架的对应Portable Text渲染依赖，只需要把渲染组件替换为对应框架的组件写法，保持types.image的映射关系即可。

注意：如果图片节点上配置了热点裁剪、边框、说明文字等自定义字段，所有字段都会挂在渲染组件接收的value参数上，直接读取使用即可，不需要额外发起请求拉取图片详情。

内容的提问来源于stack exchange，提问作者趙瑋凱