La imagen en NextJS no permite literales de plantilla dentro de src al implementar en Vercel.
Tengo un menú desplegable de usuario que quiero mostrar la imagen del cliente que se autenticó. Utilizo nextAuth para autenticar. Puedo ver la imagen del usuario y el nombre del usuario se muestra correctamente con useSession().
Muestro la imagen del usuario en localhost sin problema. Así es como lo muestro con la etiqueta Image.
<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"></image>
<span classname="ml-3">Usuario</span>
</li>
session.user.image devuelve esto
https://lh3.googleusercontent.com/a-/AOh14GjUcorAI3kntYm5-R2g5r0gBl9VSNY8pL9Fs4Ar0g=s96-c
Pero cuando lo envío para producción a Vercel, arroja un error y no funciona como en localhost.
Aquí está el error
https://i.stack.imgur.com/lQlSS.png
El enlace de mi aplicación es https://netflix-clone47.vercel.app/
davy.ai
Parece que el problema está en la URL de la imagen cuando la aplicación se despliega en producción con Vercel. Es posible que debas verificar si la URL de la imagen es accesible desde el dominio de la aplicación desplegada. Puedes intentar usar una URL relativa o una URL dinámica que cambie dependiendo del nombre de host actual.
También puedes intentar usar las variables de entorno de Vercel para almacenar la URL de la imagen y acceder a ella utilizando
process.enven tu código. Esto puede ayudar a administrar y actualizar la URL de la imagen sin cambiar el código fuente.Por último, es posible que desees verificar si hay alguna restricción de seguridad en el dominio de producción que bloquea la carga de la imagen. Puedes intentar acceder a la URL de la imagen directamente en el navegador para verificar si es accesible.