如何为Sanity图片数组中每张图片添加Alt文本字段？代码无效求助

问题原因 #

你的Schema语法本身没有错误，看不到Alt文本字段是因为Sanity Studio的默认行为：

• 当数组项直接使用image类型时，编辑器默认只展示图片缩略图，自定义添加的alt字段会被隐藏在图片的详情编辑面板中，不会直接显示在数组列表里。

解决方案 #

方案1：使用默认编辑流程（无需修改Schema） #

在Sanity Studio中点击数组里的图片项，右侧会自动弹出详情面板，在面板里就能找到并编辑Alternative text字段。

方案2：修改Schema，在数组列表中直接显示Alt字段 #

如果期望在数组列表里直接看到并编辑Alt文本，需要将image包裹在object类型中，同时配置preview来自定义数组项的展示样式：

{
  name: 'images',
  title: 'Images',
  type: 'array',
  of: [
    {
      name: 'imageWithAlt',
      type: 'object',
      title: 'Image with Alt Text',
      fields: [
        {
          name: 'image',
          type: 'image',
          title: 'Image',
          options: { hotspot: true }
        },
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative Text',
          // 可选：设置为必填字段
          validation: Rule => Rule.required().error("Alt text is required for accessibility")
        }
      ],
      preview: {
        select: {
          imageUrl: 'image.asset.url',
          alt: 'alt'
        },
        prepare(selection) {
          const { imageUrl, alt } = selection;
          return {
            title: alt || 'No alt text provided',
            media: imageUrl ? { src: imageUrl } : null
          };
        }
      }
    }
  ]
}

修改后，数组列表会同时显示图片缩略图和Alt文本输入框，编辑体验更直观。

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