I'm currently exploring React JS and Material UI to develop a dynamic web application. I'm attempting to link a local image using 'url(${process.env.PUBLIC_URL})' but unfortunately, the image is not showing up for some unknown reason.
https://i.stack.imgur.com/Fu5X4.png
Specifically, in the AboutUs.js file, I am trying to insert the water-bottle.jpg image but encountering an error message stating 'GET http://localhost:3001/images/water-bottle.jpg 500 (Internal Server Error)'.
This snippet from AboutUs.js shows the file structure:
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/ for 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>
}