如何在 Next.js 中将图像设置为背景？答案

【问题标题】：How to Set an Image as Background in Next.js?如何在 Next.js 中将图像设置为背景？
【发布时间】：2021-08-19 15:35:16
【问题描述】：

我有两个组件：

LoginLayout 应该是登录组件的高阶补偿
Login 组件是页面

我需要让登录页面有一张图片作为背景。我尝试通过 CSS 实现这一点，但它不起作用。

这里是LoginLayoutcomp：

export default ({ children, title }) => (

// I tried to add background: url(.../img)) to this login-layout class
  <div className="login-layout">
    <Head>
      <title>Login to Tex</title>
    </Head>
    <div className="login-wrapper">{children}</div>
  </div>
);

如何在 Next.js 中实现这一点？

【问题讨论】：

只是检查当你制定 css 规则时，你以文件扩展名结束了 url()，例如.png 或 .jpg?
你可以像 import './style.css' 这样在你的 LoginLayout 组件顶部导入 css 到你的组件
这是 png，我要检查一下。 @Deano 是的，但没有分享那部分代码。
您确定图片网址正确吗？您可能应该使用绝对网址来确定。
是的，看起来是正确的。

标签： javascript css reactjs next.js

【解决方案1】：

如@Deano 所述，确保将 CSS 附加到组件。

import './style.css';

如果您使用这样的 CSS 模块导入：

import styles from './MyStyles.module.css';

export default ({ children, title }) => (
  <div className={styles.loginLayout}>
    <Head>
      <title>Login to Tex</title>
    </Head>
    <div className={styles.Login-wrapper}>{children}</div>
  </div>
);

【讨论】：