Next.js v13.4.4无法通过直接路径加载外部站点图片求助

错误原因拆解 #

• 调用ImageComponent时传的是包含src属性的对象，而非直接传图片地址字符串，导致Image组件误将该对象判定为静态导入的图片（要求自带height/width属性），触发报错。
• 同时使用height/width和fill属性，这两个属性互斥，不能共存。
• nextConfig里的remotePatterns配置有误，hostname不支持前缀通配符**，写法无效。

分步解决 #

1. 修正组件参数接收与Image属性冲突 #

根据需求二选一：

方案一：固定尺寸（不用fill）

修改组件代码，明确接收字符串类型的src参数，移除fill属性：

"use client"
import Image from "next/image"

// 解构props获取src字符串
export default function ImageComponent({ src }: { src: string }) {
  return <Image src={src} alt="user-image" height={38} width={38} />
}

方案二：用fill填充父容器

若需使用fill，必须给父容器设置相对定位，同时移除height/width属性：

"use client"
import Image from "next/image"

export default function ImageComponent({ src }: { src: string }) {
  return (
    <div style={{ position: "relative", width: 38, height: 38 }}>
      <Image src={src} alt="user-image" fill objectFit="cover" />
    </div>
  )
}

2. 修正nextConfig的远程图片配置 #

将hostname改为具体域名，移除无效的前缀通配符：

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
        port: "",
        pathname: "/**",
      },
    ],
  },
}

3. 正确调用组件 #

确保传入字符串类型的图片地址，而非对象：

// 正确写法
<ImageComponent src="https://lh3.googleusercontent.com/你的具体图片路径" />

// 错误写法（禁止使用）
<ImageComponent src={{ src: "https://lh3.googleusercontent.com/你的具体图片路径" }} />

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