0

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().

enter image description here

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

enter image description here

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

sayinmehmet47
  • 490
  • 5
  • 21
  • 1
    Do you have in next config, under images, domains set up domain name from where do you get the image? https://nextjs.org/docs/api-reference/next/image#domains https://nextjs.org/docs/api-reference/next/image#loader-configuration – Gandalf The Gray Jan 07 '22 at 23:01
  • 1
    Does this answer your question? [next/image does not load images from external URL after deployment](https://stackoverflow.com/questions/65124094/next-image-does-not-load-images-from-external-url-after-deployment) – juliomalves Jan 09 '22 at 13:32

1 Answers1

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"
          />
Paiman Rasoli
  • 1,088
  • 1
  • 5
  • 15