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

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

我一直在使用和享受 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",}
        }
    }
}

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

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

解决方法

答案：

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

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

不是将 URL 传递给 <img> JSX 组件，而是将要使用的图像的整个 asset 对象传递给 media: 并且它必须使用 {{1} } 和 _ref 来破译它是什么图像。

很奇怪 - 但解决了?