小编Nas*_*sem的帖子

我在公共文件夹中有一张背景图片，名为bg.png

在页面文件夹的index.js页面中，我想使用该图像作为背景图像

我已经按照他们的官方网站的文档安装了 tailwind 。

我已经尝试过这个，但它不起作用。

从“../public/bg.png”导入BG；

return (
  <div
    className="bg-scroll"
    style={{
      backgroundImage: `url(${BG})`,
      height: "972px",
    }}
  >
  </div>
)

它不显示图像。

我是 next-auth 的新手。当我点击登录按钮时，它会将我带到谷歌登录页面。它显示帐户列表。单击其中一个帐户后，它会显示图像和电子邮件。

这个signIn()函数来自模块next-auth/react。如果我想将用户的电子邮件和图像保存在数据库中，我该怎么做？我希望用户的电子邮件和图像保存过程在用户单击其任何帐户时发生。

我在哪里编写用于将用户数据保存在数据库中的代码，其中涉及典型的数据库步骤，例如使用数据模型、数据库连接等？

//页面/index.js：

import { useSession, signIn, signOut } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        <p>Signed in as {session.user.email}</p>
        <img src={session.user.image} />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return (
    <div>
      <p>Not signed in</p>
      <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
}

//pages/api/auth/[...nextauth].js

import NextAuth from "next-auth/next";
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID, …

不知道是什么原因导致这个错误？

如果我删除以下代码，则不会显示该错误。

为什么这部分代码会导致此错误以及如何解决它？

      <div className="relative flex flex-col items-center pt-[85.25%] sm:pt-[56.25%] md:pt-[56.26%]">
        <ReactPlayer
          className="absolute top-0 left-0"
          url={`https://www.youtube.com/watch?v=u5-CF_k0KK0&list=RDu5-CF_k0KK0&start_radio=1&ab_channel=TumpyGFX`}
          width="100%"
          height="100%"
        />
      </div>