Next.js next/image缺失必填src属性报错排查修复

安全阿岳

2026-8-29

错误根因

报错触发点是页面中两处无效的Banner组件调用：

// 这两行调用仅传入了purpose参数，缺失imageUrl等其余所有参数
<Banner purpose={"kiralıkk"} />
<Banner purpose={"kiralıkk"} />

Banner组件内部直接将入参imageUrl作为src传递给next/image组件，这两处无效调用时imageUrl值为undefined，直接触发缺少必填src属性的报错。你编写的Next.js图片远程域名配置、正常传参的两处Banner逻辑均没有问题。

修复方案

按需选择以下任意一种方式处理即可：

直接删除上述两行测试残留的无效Banner调用，仅保留前后两处传全参数的Banner组件，项目即可正常运行。
如果后续需要灵活调用Banner组件、允许部分参数缺省，给组件增加参数判断兜底逻辑，避免漏传参数时渲染报错：

const Banner = ({
  purpose,
  imageUrl,
  buttonText,
  linkName,
  title1,
  title2,
  desc1,
  desc2,
}) => (
  <Flex flexWrap="wrap" justifyContent="center" alignItems="center" m="10">
    {/* 仅当imageUrl存在时才渲染图片组件 */}
    {imageUrl && <Image src={imageUrl} width={500} height={300} alt="banner"/>}
    <Box p="5">
      <Text color="gray.500" fontSize="sm" fontWeight="medium">
        {purpose}
      </Text>
      {title1 && title2 && (
        <Text fontSize="3xl" fontWeight="bold">
          {title1} <br /> {title2}
        </Text>
      )}
      {desc1 && desc2 && (
        <Text
          fontSize="lg"
          paddingTop="3"
          paddingBottom="3"
          color="gray.700"
          fontWeight="medium"
        >
          {desc1}
          <br />
          {desc2}
        </Text>
      )}
      {linkName && buttonText && (
        <Link href={linkName} passHref>
          <Button as="a" fontSize="xl" bg="blue.300" color="white">
            {buttonText}
          </Button>
        </Link>
      )}
    </Box>
  </Flex>
);