Как добавить фоновое изображение в мой проект reactjs django?

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";
import "../images/xonebg.jpeg";




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(). Я добавляю несколько вещей, таких как div и элементы изображения. Когда я добавил их прямо под return, это вызвало проблему.

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>);
}

}

Я хочу добавить фоновое изображение в свой проект. Я пробовал импортировать изображение и использовать его в формате "div" и "Image". Ничего не произошло. Я новичок в reactjs. Не слишком много о фронтенде. Спасибо

Вернуться на верх