Local image show not show up in React JS

I’m just learning about React JS and Material UI to create a dynamic web application. I’m using ‘url(${process.env.PUBLIC_URL})’ to connect my local image but for unknown reason the image would not show up.

As displayed above, I’m trying to place the water-bottle.jpg image inside AboutUs.js file but the error is constantly saying ‘GET http://localhost:3001/images/water-bottle.jpg 500 (Internal Server Error)’.

This is the file structure in AboutUs.js:

import React from 'react';
//import { Card, Container } from 'react-bootstrap';
import '../css/about-us.css';
import Navbar from './Navbar';
import Ray from '../images/rayFiltered.png';
import Jason from '../images/jasonFiltered.png';
import Johnson from '../images/jLauFiltered.png';
import Mazin from '../images/mazFiltered.png';

// Components imported from material-ui
import { Typography, AppBar, Card, CardActions, CardContent, CardMedia, CssBaseline, Grid, Toolbar, Container } from '@material-ui/core';

// Retrieved photo camera icon from material icons
// See www.material-ui.com/components/material-icons/ to get more icons
import { PhotoCamera } from '@material-ui/icons';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    root: {
        minHeight: '100vh',
        backgroundImage: `url(${process.env.PUBLIC_URL + '/images/water-bottle.jpg'})`,
    },
}));

export default function AboutUs() {
    const classes = useStyles();

    return <div className = {classes.root}></div>
   
}

Answer

You can try this

import waterBottle from '../images/water-bottle.jpg';

const useStyles = makeStyles((theme) => ({
    root: {
        minHeight: '100vh',
        backgroundImage: "url(" + waterBottle  + ")",
    },
}));