Image in NextJS does not allow template literals inside src when deploying on vercel

Question

I have a userdropdown menu that I want to show the picture of the client that authenticated. I use nextAuth to authenticate. I can see the picture of the user and name of the user turns well with useSession() .

I show the picture of the user in localhost without problem. Here how I show it with Image tag.

  <li className="py-1 px-3 hover:underline leading-8 flex">
              <Image
                width={40}
                height={40}
                className="mr-3"
                src={status === "authenticated" ? session.user.image : profile}
                alt="img"
              />
              <span className="ml-3">User</span>
            </li>

session.user.image turn that

https://lh3.googleusercontent.com/a-/AOh14GjUcorAI3kntYm5-R2g5r0gBl9VSNY8pL9Fs4Ar0g=s96-c

But when I sent it for production to vercel, it throw error and does no work like in localhost. Here the error

My app link is that https://netflix-clone47.vercel.app/

Answer 1

first check if you had the domain for images in next.config.js:

moduel.exports = {
  images : {
    domains : ['lh3.googleusercontent.com']
 }
 }

then check if session is exist by using question mark(?):

          <Image
            width={40}
            height={40}
            className="mr-3"
            src={status === "authenticated" ? session?.user?.image : profile}
            alt="img"
          />