在 vercel 上部署时，NextJS 中的图像不允许 src 中的模板文字

Question

我有一个用户下拉菜单，我想显示已通过身份验证的客户端的图片。我使用 nextAuth 进行身份验证。我可以看到用户的图片和用户名在 useSession().

中表现良好

我在 localhost 中显示用户的图片没有问题。这是我如何使用 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"
              />
              <span className="ml-3">User</span>
            </li>

session.user.image转那个

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

但是当我将它发送到 Vercel 进行生产时，它会抛出错误并且无法像在本地主机中那样工作。这里的错误

我的应用link是https://netflix-clone47.vercel.app/

Answer 1

首先检查您是否拥有 next.config.js 中的图像域：

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

然后使用问号(?)检查会话是否存在:

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

在 vercel 上部署时，NextJS 中的图像不允许 src 中的模板文字

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

javascript

reactjs

next.js

vercel

next-auth