如何在Nextjs中设置背景图片？

Question

我在我的项目中使用 Nextjs 和 Material-Ui，设置背景图像不像在其他带有 React 的项目中那样工作。这是我第一次使用 Nextjs。我尝试从“next/image”导入图像并使用， <Image height={} width={} /> 但它不像背景那样工作！如果您有任何有关使用 MUI 在 Nextjs 中设置背景的信息，我将不胜感激。

Answer 1

简答：其实图像的路径是相对路径，目标是得到图像的绝对路径。

导入图像作为 NextJS 页面的背景图像可以通过多种方法应用，但在这种情况下，作为图像文件导入可能更合适。

import myImage from "../public/imageName.png";

代码编译后，myImage 将具有一个被视为图像详细信息的对象，例如“src”、“height”、“width”和“blurDataURL”。

这是该对象的外观示例。

{
    "src": "/_next/static/media/imageName.7f7cc385.png",
    "height": 7730,
    "width": 7730,
    "blurDataURL": "/_next/image?url=%2F_next%2Fstatic%2Fmedia%myImage.7f7cc385.png&w=8&q=70"
}

最后，可以通过 myImage 对象的 src 属性直接访问图像的绝对路径。通过使用 myImage 的 src 属性，以下代码演示了如何通过 MUI Box 组件显示位于 public 文件夹中的图像。

<Box
    height={789}
    width={1440}
    sx={{
      background: `url(${myImage.src}) center / cover`,
    }} 
/>