I cannot load Next.js image in Direct Path with external site image

Question

I use Next.js v13.4.4.

Error is here, and of course, it doesn't from a static image.

Error: An object should only be passed to the image component src parameter 
if it comes from a static image import. 
It must include height and width. 
Received {"src":"https://lh3.googleusercontent.com

My next config is following:

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

My Client Component is here:

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

export default function ImageComponent(src: any) {

  return <Image src={src} alt="user-image" height={38} width={38} fill />
}

Did you try restart the Nextjs server? – Radmehr Jun 02 '23 at 06:18 — Radmehr, Jun 02 '23 at 06:18
Can you show the component too? – Greg Jun 02 '23 at 06:29 — Greg, Jun 02 '23 at 06:29
Did you try restart the Nextjs server? > Yes, I did. – Jack Jun 02 '23 at 08:24 — Jack, Jun 02 '23 at 08:24
Can you show the component too? > I added Client Component. – Jack Jun 02 '23 at 08:27 — Jack, Jun 02 '23 at 08:27

score 0 · Answer 1 · answered Jun 02 '23 at 08:45

I found the reason. I forgot {} bracket in argument. That's why there is another "src" inside argument's "src. Here is correct code.

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

export default function ImageComponent({src}: any) {

  return <Image src={src} alt="user-image" height={38} width={38} fill />
}

I cannot load Next.js image in Direct Path with external site image

1 Answers1