Sanity.io与图像下/图像问题
Sanity.io与图像下/图像问题
提问于 2022-05-28 23:16:10
这是我在Stack上的第一个官方帖子，所以请原谅我；我目前正在使用Nextjs作为我的无头CMS，我遇到了一个似乎是TypeScript类型的问题。GH：https://github.com/GabrielPedroza/e-commerce/blob/main/components/Product.tsx
<Image src={urlFor(image && image[0]!)} />
import imageUrlBuilder from "@sanity/image-url"
import { SanityImageSource } from "@sanity/image-url/lib/types/types"
export const client = sanityClient({
projectId: "gz95qrem",
dataset: "production",
apiVersion: "2022-04-27",
useCdn: true,
token: process.env.NEXT_PUBLIC_SANITY_TOKEN, // for security purposes
})
const builder = imageUrlBuilder(client)
export const urlFor = (source: SanityImageSource) => {
return builder.image(source)
} Type 'ImageUrlBuilder' is not assignable to type 'string | StaticImport'.
Property 'src' is missing in type 'ImageUrlBuilder' but required in type 'StaticImageData'.ts(2322)
image.d.ts(19, 5): 'src' is declared here.
image.d.ts(29, 5): The expected type comes from property 'src' which is declared here on type 'IntrinsicAttributes & Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | ... 4 more ... | "loading"> & { ...; }'Server Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {}Call Stack
Image
node_modules/next/dist/client/image.js (160:18)
renderWithHooks
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5448:16)
renderIndeterminateComponent
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5521:15)
renderElement
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5736:7)
renderNodeDestructive
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5875:11)
renderNode
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6009:12)
renderHostElement
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5433:3)
renderElement
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5742:5)
renderNodeDestructive
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5875:11)
renderNode
file:///Users/gabrielpedroza/Code/e-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6009:12)删除错误的一种方法是只使用字符串或使用ts-忽略，但这显然不能在我的场景中使用，因为我使用的是理智。我暂时的脏解决方案是使用常规的img标记并使用ts-忽略，这样它就能工作了。我试着问官方的下一个不和谐服务器，总体上谷歌和阅读文档，但没有找到真正的解决方案。
回答 1
Stack Overflow用户
发布于 2022-05-29 17:22:13
想出了一个干净的解决方案：
const src = urlFor(image && image[0]).url()
<Image loader={() => src} src={src} layout='fill' />
``` Wrap the Image component in a div tag and make sure it is `position: relative;` so layout='fill' would work properly if you want to make your images responsive页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72419865
复制相关文章
相似问题
腾讯云开发者
