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:
JavaScript
x
32
32
1
import React from 'react';
2
//import { Card, Container } from 'react-bootstrap';
3
import '../css/about-us.css';
4
import Navbar from './Navbar';
5
import Ray from '../images/rayFiltered.png';
6
import Jason from '../images/jasonFiltered.png';
7
import Johnson from '../images/jLauFiltered.png';
8
import Mazin from '../images/mazFiltered.png';
9
10
// Components imported from material-ui
11
import { Typography, AppBar, Card, CardActions, CardContent, CardMedia, CssBaseline, Grid, Toolbar, Container } from '@material-ui/core';
12
13
// Retrieved photo camera icon from material icons
14
// See www.material-ui.com/components/material-icons/ to get more icons
15
import { PhotoCamera } from '@material-ui/icons';
16
17
import { makeStyles } from '@material-ui/core/styles';
18
19
const useStyles = makeStyles((theme) => ({
20
root: {
21
minHeight: '100vh',
22
backgroundImage: `url(${process.env.PUBLIC_URL + '/images/water-bottle.jpg'})`,
23
},
24
}));
25
26
export default function AboutUs() {
27
const classes = useStyles();
28
29
return <div className = {classes.root}></div>
30
31
}
32
Advertisement
Answer
You can try this
JavaScript
1
9
1
import waterBottle from '../images/water-bottle.jpg';
2
3
const useStyles = makeStyles((theme) => ({
4
root: {
5
minHeight: '100vh',
6
backgroundImage: "url(" + waterBottle + ")",
7
},
8
}));
9