我无法从 TMDB API 加载图像答案

【问题标题】：I Cannot Load Images From TMDB API我无法从 TMDB API 加载图像
【发布时间】：2021-10-22 23:22:32
【问题描述】：

我正在尝试构建一个 HULU 克隆 我有 成功构建标题 并且我正在构建一个结果部分，用户可以在其中看到电影的图像，但是当我加载图像时它只是不加载图像

我正在使用的技术 React.Js Next.js 顺风 css TMDB 接口

错误提示 - Failed to load resource: the server responded with a status of 404 () 由于对 TMDB Api 的请求不佳，我认为这是一个错误

这是我的request.js

const API_KEY = process.env.API_KEY;

export default {
  fetchTrending: {
    title: "Trending",
    url: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
  },
  fetchTopRated: {
    title: "Top Rated",
    url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
  },
  fetchActionMovies: {
    title: "Action",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
  },
  fetchComedyMovies: {
    title: "Comedy",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
  },
  fetchHorrorMovies: {
    title: "Horror",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
  },
  fetchRomanceMovies: {
    title: "Romance",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
  },
  fetchMystery: {
    title: "Mystery",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=9648`,
  },
  fetchSciFi: {
    title: "Sci Fi",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=878`,
  },
  fetchWestern: {
    title: "Western",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=37`,
  },
  fetchAnimation: {
    title: "Animation",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=16`,
  },
  fetchTV: {
    title: "TV Movie",
    url: `/discover/movie?api_key=${API_KEY}&with_genres=10770`,
  },
};

这是我的 index.js

import Head from "next/head";
import Header from "../components/Header";
import Nav from "../components/Nav";
import Results from "../components/Results";
import request from "../utils/request";

export default function Home({ results }) {
  return (
    <div>
      <Head>
        <title>HULU</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header />

      <Nav />

      <Results results={results} />
    </div>
  );
}

export async function getServerSideProps(context) {
  const genre = context.query.genre;
  const requests = await fetch(
    `https://api.themoviedb.org/3${
      request[genre]?.url || request.fetchTrending.url
    }`
  ).then((res) => res.json());
  return {
    props: {
      results: requests.results,
    },
  };
}

这是我在 Thumbnail.js 中加载图像的地方

      import React from "react";
import Image from "next/image";

function Thumbnail({ result }) {
  const BASE_URL = "https://image.tmdb.org/t/p/orignal";
  console.log(result);
  return (
    <div>
      <Image
        layout="responsive"
        src={
          `${BASE_URL}${result.backdrop_path || result.poster_path}` ||
          ` ${BASE_URL}${result.poster_path}`
        }
        height={1080}
        width={1920}
      />
    </div>
  );
}

export default Thumbnail;

这是控制台在 Thumbnail.js 中记录的结果 Result Console Log

Error Shown in Console

如果您需要任何进一步的信息，请告诉我提前致谢

【问题讨论】：

我会尝试以下 1. 更改基本 url 并确保它是正确的 2. 将 API 密钥添加到查询参数。这可能是一个要求，谁知道呢。请务必阅读文档。
我检查了基本 URL 是否正确，我尝试直接替换我的 api 密钥，但没有任何改变
控制台日志没有显示任何错误。因此，这个问题是不可重现的。
确实如此，我将编辑问题并添加图像
您确定result 总是包含backdrop_path 或poster_path？似乎在某些情况下它通过了导致 404 的 undefined。

标签： reactjs rest next.js tailwind-css

【解决方案1】：

引发错误的 URL 指向 http://localhost:3000，而不是您拥有的 IMBD URL。

确保您的代理没有在所有 HTTP 请求前添加 http://localhost:3000

同时确保您没有使用相对 URL，因为这会导致 http://localhost:3000 被添加到 HTTP 请求之前。

【讨论】：