来自第 3 方的 nextjs 图像问题

Question

所以我运行分为 2 期。首先，我使用 Firebase 授权 GitHub 和 Google 登录，所以我在我的导航栏中将人物头像显示为个人资料图片。现在在我的代码中一切正常，直到我将 <img> 切换为 <Image> - 然后我收到以下两个错误：

这是我使用头像的片段：

import Image from 'next/image'
import { useAuth } from '@/lib/auth';
const DashboardShell = ({ children }) => {
      const { user, signout } = useAuth();
    
      return (
            <Link href="/account" passHref>
              <a>
                <Image
                  src={user?.photoUrl ?? ''}
                  width="96"
                  height="96"
                  alt="profile avatar"
                />
              </a>
            </Link>
      )
      
    }

现在，当我使用 img 而不是 Image 时，头像会显示并起作用。当我将它切换到 Image 时，我得到了错误，我 console.log 了 user?.photoUrl，它显示为 undefined，所以我保留了 console.log并切换回 img，我注意到控制台日志在页面加载后立即显示未定义，然后立即记录 URL，因此其日志记录未定义和 url.

这几乎就像在检索头像 URL 之前尝试加载下一张图片。

所以我的问题是，有没有办法告诉 next/image 等待加载直到 user?.photoUrl 为 retrieved/populated？

还有，我的 next.config.js 文件中列出了图像域： const path = require('path')

module.exports = {
  trailingSlash: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  },
  images: {
    domains: ['lh3.googleusercontent.com', 'avatars.githubusercontent.com'],
  },
}

我在 "next": "12.1.0", 我在 Vercel 运行。

Answer 1

您可以显示占位符图像直到加载头像

<Image
     src={user?.photoUrl || '/public/static/placeholderImg'}
     width="96"
     height="96"
     alt="profile avatar"
/>

Answer 2

我认为您的图像主机名问题已通过 next.config.js

中的最新配置得到解决

解决第二个问题，即 next/image 上的 undefined 图片。你可以有一个单独的图像来源检查

import NextImage from 'next/image'
import { useAuth } from '@/lib/auth';

const Image = (props) => {
   if(props.src) {
      return <NextImage {...props}/>
   }
   
   //TODO: if the image source is not there, you can set a default source
   //const defaultSrc = "something"

   return <img {...props} src={defaultSrc}/>
}

const DashboardShell = ({ children }) => {
      const { user, signout } = useAuth();

      return (
            <Link href="/account" passHref>
              <a>
                <Image
                  src={user?.photoUrl}
                  width="96"
                  height="96"
                  alt="profile avatar"
                />
              </a>
            </Link>
      )
      
    }

来自第 3 方的 nextjs 图像问题

issues with nextjs images from 3rd party

reactjs

next.js

vercel

nextjs-image