Estoy tratando de hacer un sitio web de pizza y cuando hago clic en la información de la pizza, aparece este error: Error de servidor Error: no se puede resolver la URL de la imagen desde la fuente (indefinido) Este es mi [slug.js]:
import css from '../../styles/Pizza.module.css' import Layout from '../../components/Layout' import { client, urlFor } from '../../lib/client'; import Image from 'next/image' export default function Pizza( pizza ) { const src = urlFor(pizza.image).url() return ( <Layout> <div className={css.container}> <div className={css.imageWrapper}> <Image loader={()=> src} alt='' src={src} layout='fill' unoptimized objectFit='cover'/> </div> </div> </Layout> ); } export async function getStaticPaths() { const paths = await client.fetch( `*[_type=="pizza" && defined(slug.current)][].slug.current` ); return { paths: paths.map((slug)=> ({params: {slug}})), fallback: 'blocking', } } export async function getStaticProps(context) { const {slug = ""} = context.params; const pizza = await client.fetch( `*[_type=="pizza" && slug.current == ${slug}][0]` ); return { props: { pizza, }, }; }Y este es mi cliente.js:
import sanityClient from '@sanity/client'; import ImageUrlBuilder from '@sanity/image-url'; export const client = sanityClient({ projectId: 'fzrtqgg5', dataset: 'production', apiVersion: "2022-08-26", useCdn: true, token: "skbb3liMqr3eQniDCvA0XzPQjjCqx4q0DgEbi2FeqhGcT6SjVfT9krLhV4KAELgyJxnaifSxITf1j9gJUZ4W1fSCONMVehDiL5Gd6wNVyx4uqnKghGh6zsEtoNUWxMqsztb3CidyRBbwR99p8XlIPYg3SgtDsTAf412OCDngizvLkFbqFsNE" }) const builder = ImageUrlBuilder(client); export const urlFor = (source) => builder.image(source)He buscado en Google durante 8 horas, pero todo no funciona.