与来自第三方的nextjs图像的问题

5vf7fwbs 于 2023-03-08 发布在其他

关注(0)|答案(3)|浏览(177)

所以我遇到了两个问题。首先我使用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时，我收到错误，我对user?.photoUrl进行console.log，它显示为undefined。所以我保留了控制台。日志并切换回img，我注意到控制台日志在页面加载后立即显示undefined，然后立即记录URL，所以它的日志未定义和URL。
这几乎就像下一个图像尝试的加载之前，化身的网址被检索。
因此，我的问题是，是否有办法告诉next/image等待加载，直到检索/填充user?.photoUrl为止？
同样是的，我的next.config.js文件中列出了图像域：常量路径=需要（"路径"）

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

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

next.js

来源：https://stackoverflow.com/questions/71722871/issues-with-nextjs-images-from-3rd-party

3条答案

按热度按时间

w1e3prcc1#

我认为您的映像主机名问题已通过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>
      )
      
    }

赞(0）回复(0）举报 2023-03-08

lf5gs5x22#

您可以显示占位符图像，直到加载化身

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

赞(0）回复(0）举报 2023-03-08

vfhzx4xs3#

我在个人资料页面中添加了以下代码：

import { getAuth } from "firebase/auth"
import { app } from "../firebaseConfig";

const ProfilePage = () => {
const auth = getAuth(app);
const user = auth.currentUser
  if (user !== null) {
    const displayName = user.displayName;
    const email = user.email;
    const photoURL = user.photoURL;
    const emailVerified = user.emailVerified;
    const uid = user.uid;
 }

资料来源：
https://firebase.google.com/docs/auth/web/manage-users#get_a_users_profile
在我的img中：

<img
   src={user.photoURL} 
   alt="photo de profil"
   width={150}
   height={150}
   className="py-10 mx-auto"
/>

这是我的next.config.js文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['lh3.googleusercontent.com']
  }
}
module.exports = nextConfig

赞(0）回复(0）举报 2023-03-08

我来回答

与来自第三方的nextjs图像的问题

3条答案

相关问题

热门标签

最新问答