html - 我想在 React JS 中添加背景图片全屏封面

Question

import React, {Component} from "react";
import CreateRoomPage from "./CreateRoomPage";
import RoomJoinPage from "./RoomJoinPage";
import Room from "./Room";
import { Grid, Button, ButtonGroup, Typography } from "@material-ui/core";
import {BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";
import Info from "./info";

我确实导入了图像路径和本地图像文件夹，但没有工作。

export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roomCode: null,
        };
        this.clearRoomCode = this.clearRoomCode.bind(this);
    }

async componentDidMount(){
    fetch("/api/user-in-room").then((response) => response.json()).then((data) => {
        this.setState({
            roomCode: data.code
        });
    });  
}


renderHomePage(){
    return(
        <Grid container spacing={3}>
            <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>
    
    );
}

clearRoomCode(){
    this.setState({
        roomCode:null
    });
}

render(){
    return (
        
    <Router>
        <Switch>
            <Route exact path="/" render={() => {
                return this.state.roomCode ? (<Redirect to={`/room/${this.state.roomCode}`}/>) : (this.renderHomePage());
            }}/>
            <Route path="/join" component={RoomJoinPage}/>
            <Route path="/info" component={Info}/>
            <Route path="/create" component={CreateRoomPage}/>
            <Route path="/room/:roomCode" render={(props) => {
                return <Room {...props} leaveRoomCallback= {this.clearRoomCode} />
            }}/>
        </Switch>
    </Router>);
}
} 

我想添加 bg 图像，但我不知道如何或在哪里放置它。

这个页面是我的登陆页面。

当我导入本地图像文件夹时，我收到了一些关于 webpack 的错误。

标签： htmlcssreactjs