Sanity.io - 用于预览/选择的图像 URL 曝光

Question

我一直在使用和享受 Sanity，目前正在使用它构建一个合理大小的 CMS。我正在尝试为图像库设置一些“预览”图像（使用类型数组）。 浏览了文档后，我找不到我正在寻找的解决方案 - 并且根据他们在架构中使用 preview 设置来判断，我无法复制 image.asset.url 的相同用法，因为它不在对象中登录时。

任何帮助将不胜感激 - 我假设存在配置问题或我可能没有的软件包有助于揭露这一点。但是在查看了多个 Sanity Test Repo 之后，没有一个是突出的。

架构代码。

export default {
    name: "imageSliderBlock",
    type: "object",
    title: "Image Slider Block",
    fields: [
        {
            name: "slider",
            type: "array",
            title: "Slider",
            options: {
                layout: 'grid'
            },
            of: [
                {
                    // These are the images I am attempting to query
                    name: "image",
                    type: "image",
                    title: "Slide Image",
                    options: {
                        hotspot: true,
                    },
                    fields: [
                        {
                            name: "alt",
                            type: "string",
                            title: "Alternative Text",
                            validation: Rule => Rule.error('You have to fill out the alternative text.').required(),
                            options: {
                                isHighlighted: true,
                            }
                        }
                    ]
                }
            ]
        }
    ],
    preview: {
        select: {
            // This is the query that should work
            // It should find the first array index within the name:slider
            // and grab the asset url within the object.
            media: 'slider.0.asset.url'
        },
        prepare: ({media}) => {
            // Returns only asset._ref and asset._type:reference
            console.log(media);
            return {
                title: "Image Slider Block",
            }
        }
    }
}

注意：以下是来自调用 > media: slider.0 的 console.log() 以显示对象（显然上述架构不起作用，因为我已经声明对象中没有 asset.url。

{_type: "image", asset: {…}}
asset:
_ref: "image-cd7896b89af6cbd0feb9d47dc1ebd6cff396f400-1755x1241-png"
_type: "reference"
__proto__: Object
_type: "image"
__proto__: Object

Answer 1

回答：

因此，文档似乎与可能发生的更改相比有些过时，或者我试图做一些与示例稍有不同的事情。

  preview: {
        select: {
            image: 'slider.0.asset',
        },
        prepare: ({image}) => {
            return {
                title: 'Slider Block',
                media: image
            }
        }
    }

不是将 URL 传递给 <img> JSX 组件，而是将要使用的图像的整个 asset 对象传递给 media: ，它必须使用 _ref 和 _type 来破译什么图片就是这样。

非常奇怪 - 但已解决?