React+Next.js开发HULU克隆时TMDB API图片加载404报错求助

你遇到的图片404错误由两个常见问题导致，按顺序修改即可修复：

1. 修复TMDB图片基础路径拼写错误 #

在Thumbnail.js中你定义的图片基础路径拼写错误：

// 错误写法（少了字母i）
const BASE_URL = "https://image.tmdb.org/t/p/orignal";
// 正确写法
const BASE_URL = "https://image.tmdb.org/t/p/original";

这是触发404的核心原因，TMDB的静态资源路径要求严格，拼写错误会直接返回404状态。

2. 配置Next.js外部图片域名白名单 #

Next.js内置的Image组件默认禁止加载未在配置中声明的外部域名资源，你需要在项目根目录的next.config.js中添加TMDB的图片域名配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["image.tmdb.org"],
  },
}

module.exports = nextConfig

修改配置后需要重启本地开发服务才能生效。

可选优化建议 #

• 不需要直接请求original尺寸的原图，可以按需选择合适的分辨率降低加载耗时，比如用w500代替original，基础路径改为https://image.tmdb.org/t/p/w500即可
• 可以给图片路径增加兜底逻辑，避免部分没有海报/背景图的影视资源触发404，比如可以先判断backdrop_path和poster_path是否存在，不存在时显示本地占位图

内容的提问来源于stack exchange，提问作者Harsh Anand