具有 auth0 的 NextJS 图像组件

Question

I am trying to integrate auth0 with nextJS and am having an issue with the next.js Image component. First, let's take a look at the code:

import Image from "next/image"
import { useUser } from "@auth0/nextjs-auth0"

export default function Profile() {
  const { user, error, isLoading } = useUser()

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>{error.message}</div>

  return (
    user && (
      <div>
        <Image src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  )
}

This is basically a direct copy from their sample nextjs integration, except that I changed the img tag to the nextjs Image component. Ie, this: <Image src={user.picture} alt={user.name} /> instead of this <img src={user.picture} alt={user.name} /> .

However, this has lead to a typescript error -- as shown in this screenshot:

It seems to me that the nextjs image component is expecting a type of string | StaticImport string | StaticImport whereas auth0 has setup a type of string | null | undefined string | null | undefined string | null | undefined - as such the types clash and I am getting an error.

Assuming that that is correct, any idea how can I fix that? Alternatively, if the problem is something else -- any idea what is the problem and how I can fix that?

Thanks.

Answer 1

It seems that the user.picture is optional (at least from typescript's point of view), meaning it might be set or not, so you need to handle what happens if it's not set. The image accepts type string or StaticImport , and in your case it seems to be string , no need to worry about the other one, but what it doesn't accept is null or undefined , so let's get rid of those.

I'm assuming from the error message that the user can't be undefined or null , but only the.picture can be, so in that case I would fix it like this:

<Image src={user.picture ?? ''} alt={user.name ?? ''} />

That sets it to empty string if the value is null or undefined. If also the user can be undefined, then the same works with minor change of adding few more ? :

<Image src={user?.picture ?? ''} alt={user?.name ?? ''} />

Answer 2

Set the width and the height in you Image component.

import Image from "next/image"
import { useUser } from "@auth0/nextjs-auth0"

export default function Profile() {
  const { user, error, isLoading } = useUser()

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>{error.message}</div>

  return (
    user && (
      <div>
        <Image 
          src={user.picture} 
          width="100"
          height="100"
          alt={user.name} 
        />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  )
}