Next.js图片资源无效错误：开发正常生产环境不显示

问题描述 #

报错信息：

⨯ The requested resource isn't a valid image for /assets/menuItems/Gan-fan.webp received text/html; charset=utf-8

在Next.js中使用Image组件时遇到上述问题：开发环境图片能正常显示，生产环境仅显示alt文本。已尝试以下方法但均无效：

• 检查图片路径正确性
• 在next.config.js中配置images: { unoptimized: true }
• 将图片路径改为/public//assets/格式
• 怀疑是WebP格式问题，但项目中其他WebP图片可正常加载

相关组件代码：

<Flex
  key={item.name}
  position="relative"
  width="100%"
  borderRadius="lg"
  direction="column"
  mb="4"
>
  <Box
    position="relative"
    width="100%"
    paddingBottom="100%"
    borderRadius="lg"
    overflow="hidden"
  >
    <Image
      src={item.image}
      alt={item.name}
      style={{
        objectFit: "cover",
        position: "absolute",
        top: "0",
        left: "0",
        width: "100%",
        height: "100%",
      }}
      fill
    />
    {badgeType === "PICTURE" && (
      <Badge
        zIndex="4"
        position="absolute"
        top="0"
        right="0"
        bg="#dfa25f"
        color="white"
        m="16px"
      >
        <Text fontSize="xs">{item.categories.join(", ")}</Text>
      </Badge>
    )}
  </Box>
</Flex>

排查与解决方案 #

• 确认生产环境资源路径匹配：检查生产构建后的out/dist目录中，Gan-fan.webp是否存在于assets/menuItems路径下，注意文件名大小写（Linux服务器区分大小写），确保和代码中引用的完全一致。
• 验证图片文件有效性：单独打开该WebP文件，确认没有损坏；重新替换该图片资源后重新构建部署，排除打包过程中文件损坏的可能。
• 检查静态资源服务的MIME类型配置：如果部署在非Vercel平台（比如Nginx），需确保服务器正确识别WebP类型，在Nginx配置中添加：

  types {
    image/webp webp;
  }
  

• 确认动态路径输出正确性：在生产环境打开浏览器控制台，查看Image组件实际请求的URL，对比静态资源的真实路径，排查item.image动态值是否存在多斜杠、路径前缀缺失等问题。
• 确认Next.js配置生效：检查next.config.js的unoptimized配置是否正确，确保代码中没有其他配置覆盖该设置，重新构建项目后部署。

内容的提问来源于stack exchange，提问作者Emir baktybekov