背景图像不在服务器上呈现（nextjs）答案

【问题标题】：Background image does not render on server (nextjs)背景图像不在服务器上呈现（nextjs）
【发布时间】：2022-02-12 20:21:35
【问题描述】：

我正在使用 NextJs。我想在 body 上应用背景图像，它应该在服务器端呈现。

这是我的代码

下面是我的 App.js

import BodyStyle from '@components/Bodystyle';
return (
    <>
      <BodyStyle bgColor={`url("picture-url")`} />
<>);

这是我的 BodyStyle.js

const BodyStyle = (props) => {
  const { bgColor } =
    props;
  return (
    <Head>
      <style>{`body { background: ${bgColor} no-repeat center center fixed; background-size: cover;`}</style>
    </Head>
  );

背景应用于主体，但不是来自 SSR

但是如果我只是从 BodyStyles.js 复制代码并粘贴到 app.js 中，那么背景图像会在服务器上正常呈现

这里是 App.js 的示例代码

import Head from 'next/head';

return (
  <Head>
        <style>{`body { background: url(${url}) no-repeat center center fixed; background-size: cover;`}</style>
      </Head> 
);

附上截图 没有 SSR 的背景

以 SSR 为背景

可能是什么问题？任何帮助

【问题讨论】：

我在您的 BodyStyle.js 中没有看到 url(${url})，但我在 App.js 中看到了它。你确定是直接复制的。也许我错过了一些东西，因为我从未与 Next 合作过
因为我将它作为道具传递`bgColor={url("picture-url")}`
您确定将 prop 传递给您的 BodyStyle.js，如果是，您是否还需要像在 App.js 中一样实现它？
尝试使用标签而不是

标签： javascript css reactjs next.js

【解决方案1】：

我认为这是因为您在没有任何道具时使用设置 bgcolor 还尝试在 useEffect 中使用它或类似以下代码：

const BodyStyle = ({bgColor}) => {

  return (
    <Head>
      <style>{`body { background: ${bgColor} no-repeat center center fixed; background-size: cover;`}</style>
    </Head>
  );

【讨论】：