如何在Next.js中结合Material-UI设置背景图片？

刚接触Next.js的时候确实会碰到这种和普通React项目不一样的情况——next/image的Image组件本身是用来做图片嵌入展示的，没办法直接当成背景图来用，下面给你两种实用的解决方案，你可以根据自己的需求选：

方案一：直接通过Material-UI样式设置背景图（适合本地/公开资源） #

如果你的图片放在项目的public目录下（比如public/hero-bg.jpg），可以直接在Material-UI的样式里用backgroundImage属性实现，不管是用sx prop、styled组件还是传统的makeStyles都能搞定：

示例1：用sx prop（Material-UI v5推荐写法） #

import { Box } from '@mui/material';

export default function BackgroundPage() {
  return (
    <Box
      sx={{
        width: '100vw',
        height: '100vh',
        backgroundImage: 'url(/hero-bg.jpg)', // 直接用public目录下的相对路径
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}
    >
      {/* 这里放你的页面内容 */}
      <Box sx={{ padding: '2rem', color: 'white' }}>
        <h1>这是带背景图的页面</h1>
      </Box>
    </Box>
  );
}

示例2：用styled组件封装 #

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';

const BackgroundContainer = styled(Box)(({ theme }) => ({
  width: '100%',
  minHeight: '600px',
  backgroundImage: 'url(/hero-bg.jpg)',
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}));

export default function BackgroundPage() {
  return (
    <BackgroundContainer>
      {/* 内容区域 */}
      <Box sx={{ color: 'white', textAlign: 'center' }}>
        <h2>我在背景图中央</h2>
      </Box>
    </BackgroundContainer>
  );
}

如果是用外部CDN的图片，记得先在next.config.js里配置允许的域名，之后同样可以用url(完整图片地址)来设置背景图。

方案二：用next/image实现带优化的背景图 #

要是你想利用next/image的图片优化特性（比如自动格式转换、懒加载、响应式缩放），可以把Image组件放在相对定位的容器里，设置绝对定位让它铺满容器当背景，再在容器里放内容层：

import { Box } from '@mui/material';
import Image from 'next/image';

export default function OptimizedBackground() {
  return (
    <Box
      sx={{
        width: '100%',
        height: '700px',
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      {/* 背景图：用fill属性自动填充容器 */}
      <Image
        src="/hero-bg.jpg" // 外部图片需提前配置domains
        fill
        style={{ objectFit: 'cover' }} // 等效于background-size: cover
        alt="页面背景图"
        priority // 首屏背景图可以加这个属性提升加载优先级
      />
      {/* 内容层：相对定位，在背景图上方 */}
      <Box
        sx={{
          position: 'relative',
          zIndex: 1,
          color: 'white',
          padding: '3rem',
          maxWidth: '800px',
          margin: '0 auto'
        }}
      >
        <h1>带Next.js图片优化的背景图</h1>
        <p>这里的背景图会自动做格式转换和懒加载哦</p>
      </Box>
    </Box>
  );
}

这里的fill是Next.js 13+的特性，能让Image组件自动继承父容器的宽高，配合objectFit就能实现和背景图一样的适配效果。

额外注意点 #

• 用外部图片时，必须在next.config.js里添加对应域名到images.domains数组：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['your-cdn-domain.com'],
  },
};

module.exports = nextConfig;

• 如果你用的是Next.js App Router（13+），还可以结合Image组件的quality属性调整背景图的清晰度，平衡加载速度和显示效果。

内容的提问来源于stack exchange，提问作者Vida Khalili