如何在React JS落地页添加全屏覆盖背景图及解决本地图片导入webpack报错

1. 解决本地图片导入webpack报错问题 #

首先确认图片存放规则，两种方案可选：

• 方案一（推荐）：将背景图放在src/assets/目录下，比如命名为bg.jpg
  • 如果你使用create-react-app官方脚手架创建项目，默认已经配置了图片加载规则，直接正确导入即可，不需要修改webpack配置
  • 如果你是自定义webpack配置的项目：
    • webpack4及更低版本：安装file-loader后在webpack配置的module.rules中添加图片加载规则
    • webpack5及更高版本：在webpack配置的module.rules中添加如下规则：

    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/resource',
    }
    

  配置完成后在你的依赖导入区域添加图片导入语句：

  import bgImage from './assets/bg.jpg'; // 路径替换成你实际的图片存放路径
  

• 方案二（无需改webpack配置）：将背景图放在项目public/目录下，不需要导入语句，后续直接用文件名引用即可

2. 实现全屏覆盖背景效果 #

第一步：修改renderHomePage方法 #

在外层新增全屏背景容器，同时调整内容布局保证可读性：

renderHomePage(){
    return(
        <div style={{
            minHeight: '100vh',
            width: '100%',
            // 用方案一导入的图片写下面这行
            backgroundImage: `url(${bgImage})`,
            // 用方案二的public目录图片写下面这行
            // backgroundImage: 'url(/bg.jpg)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        }}>
            {/* 内层Grid加半透明白背景是为了让文字按钮更清晰，不需要可以删掉style里的内容 */}
            <Grid container spacing={3} style={{background: 'rgba(255,255,255,0.85)', padding: '2rem', borderRadius: '12px'}}>
                <Grid item xs={12} align="center">
                    <Typography variant = "h3" compact="h3">
                        Xone Music
                    </Typography>
                </Grid>
                <Grid item xs={12} align="center">
                    <ButtonGroup disableElevation variant="contained" color="primary">
                        <Button color="primary" to="/join" component={Link}>
                            Join a Room
                        </Button>
                        <Button color="default" to="/info" component = {Link} >
                        <Typography variant = "h5" compact="h5">
                            ?
                        </Typography>
                        </Button>
                        
                        <Button color="secondary" to="/create" component = {Link}>
                            Create a Room
                        </Button>
                    </ButtonGroup>
                </Grid>
            </Grid>
        </div>
    );
}

第二步：清除默认边距（可选，避免页面边缘出现白边） #

在项目全局css文件（通常是src/index.css）中添加如下代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #root {
  height: 100%;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Eray Küçük