Next.js对接TMDB API时next.config.js配置致图片加载错误求助

已完成的实现步骤 #

• 配置环境变量：创建.env.local文件存储TMDB API密钥

NEXT_PUBLIC_API_KEY=251f12aad47327cc7ea4862f07acb7*** 

• 定义图片基础URL：编写movie.ts文件

export const baseUrl = 'https://image.tmdb.org/t/p/original/'

• 实现Banner组件逻辑：从传入的影片列表中随机选择一部，展示其背景图或海报

import Image from 'next/image'
import { Movie } from '../typings'
import { useState, useEffect } from 'react'
import { baseUrl } from '../constants/movie'

interface Props {
    netflixOriginals: Movie[]
}

function Banner({ netflixOriginals }: Props) {
    const [movie, setMovie] = useState<Movie | null>(null)

    useEffect(() => {
        setMovie(
          netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
        )
    }, [netflixOriginals])

    return (
        <div>
            <div className='absoute top-0 left-0 h-[95hv] w-screen'>
                <Image
                    fill={true}
                    src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`} 
                    alt={'影片海报'}            
                />
            </div>
        </div>
    )
}

export default Banner

• 配置Next.js图片域名：按照新版文档配置next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'image.tmdb.org',
        port: '',
        pathname: 'https://image.tmdb.org/t/p/original/',
      },
    ],
  },
}

出现的错误信息 #

Error: Invalid src prop (https://image.tmdb.org/t/p/original/undefined) on `next/image`, hostname "image.tmdb.org" is not configured under images in your `next.config.js`

已尝试的无效方案 #

使用旧版Next.js图片域名配置方式，无法解决问题：

module.exports = {
  images: {
    domains: [image.tmdb.org],
  },
}

求助需求 #

需要正确的next.config.js配置方案，解决上述图片加载错误。

内容的提问来源于stack exchange，提问作者Viktor Kyrylovych