我无法从 TMDB API 加载图像
Posted
技术标签:
【中文标题】我无法从 TMDB API 加载图像【英文标题】：I Cannot Load Images From 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。
【参考方案1】：
引发错误的 URL 指向 http://localhost:3000，而不是您拥有的 IMBD URL。
确保您的代理没有在所有 HTTP 请求前添加 http://localhost:3000
同时确保您没有使用相对 URL，因为这会导致 http://localhost:3000 被添加到 HTTP 请求之前。
【讨论】：
以上是关于我无法从 TMDB API 加载图像的主要内容，如果未能解决你的问题，请参考以下文章