React项目中TMDB演员头像路径为null时的图片显示问题求助

你的代码存在两个关键问题，导致了破图现象：

• 条件判断对象错误：你用了cast?.profile_path === null，但cast是整个演员数组，应该判断当前遍历的item对象里的profile_path。
• 重复渲染Image组件：不管条件是否满足，你都渲染了两个<Image>，即使profile_path为null，第二个Image仍会生成${imagePath}/null的无效路径，导致破图。

修改后的代码 #

import imageSrc from "../assets/person.jpeg";

<Flex mt={"5"} mb={"10"} overflow={"scroll"} gap={"5"}>
  {cast?.length === 0 && <Text> No cast found</Text>}

  {cast &&
    cast?.map((item) => (
      <Box key={item?.id} minW={"150px"}>
        {/* 用三元运算符选择正确的图片源 */}
        <Image 
          src={item?.profile_path ? `${imagePath}/${item.profile_path}` : imageSrc} 
          alt={item?.name} {/* 增加alt属性提升可访问性 */}
        />
        <Text>{item?.name}</Text>
        <Text fontSize={"smaller"} color={"gray.400"}>
          {item?.character}
        </Text>
      </Box>
    ))}
</Flex>

额外优化（可选） #

如果担心TMDB返回的图片路径存在但资源不存在（返回404），可以给Image添加onError事件，自动 fallback到本地图片：

<Image 
  src={item?.profile_path ? `${imagePath}/${item.profile_path}` : imageSrc} 
  alt={item?.name}
  onError={(e) => {
    e.target.src = imageSrc;
  }}
/>

内容的提问来源于stack exchange，提问作者Zülal