Next.js+Sanity切换Image组件遇Invalid src prop错误求助

问题描述 #

我是编程新手，在使用Sanity和Next.js开发项目时，将原生img标签替换为Next.js的Image组件后，弹出了Invalid src prop错误，错误截图显示URL中存在undefined。原本代码可正常运行，推测问题来自后端，且已在next.config.js中配置域名，希望有人能帮忙解决该问题。

相关代码 #

const SampleImageComponent = ({ value, isInline }) => {
  const { width, height } = getImageDimensions(value);
  return (
    <Image
      src={urlBuilder()
        .image(value)
        .width(isInline ? 100 : 800)
        .url()}
      alt={value.alt || 'No image'}
      loading='lazy'
      style={{
        // Display alongside text if image appears inside a block text span
        display: isInline ? 'inline-block' : 'block',

        // Avoid jumping around with aspect-ratio CSS property
        aspectRatio: width / height,
      }}
      width={100}
      height={100}
    />
  );
};
const components = {
  types: {
    image: SampleImageComponent,
    // Any other custom types you have in your content
    // Examples: mapLocation, contactForm, code, featuredProjects, latestNews, etc.
  },
};

<PortableText value={blog.body} components={components} />;

解决步骤 #

• 校验value有效性：在组件开头添加判断，避免传入无效值给urlBuilder：

  if (!value) return null;
  

• 确认urlBuilder初始化：确保已用Sanity项目的配置正确初始化urlBuilder：

  import createImageUrlBuilder from '@sanity/image-url';
  import { projectId, dataset } from './sanity.config'; // 替换成你的Sanity配置
  
  const urlBuilder = createImageUrlBuilder({ projectId, dataset });
  

  未正确初始化会导致生成的URL包含undefined。
• 兜底图片尺寸：给getImageDimensions的返回值加默认值，避免width/height为undefined：

  const { width = 100, height = 100 } = getImageDimensions(value) || {};
  

• 匹配Image组件尺寸：Next.js Image的width/height属性建议和urlBuilder中指定的width参数对应，或者使用fill属性配合容器样式，避免尺寸校验报错。
• 调试URL生成：在组件中添加日志，定位undefined来源：

  const imageUrl = urlBuilder().image(value).width(isInline ? 100 : 800).url();
  console.log('Image data:', value);
  console.log('Generated URL:', imageUrl);
  

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