Local image show not show up in React JS

Question

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

Does this answer your question? [Setting a backgroundImage With React Inline Styles](https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles) — Jared Smith, May 16 '21 at 19:14

score 1 · Answer 1 · answered May 16 '21 at 19:10

1

You try the following. It should work.

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

<img src={waterBottle} alt="water-bottle" />

answered May 16 '21 at 19:10

Mohammad Abdul Alim

468
5
11

score 1 · Accepted Answer · answered May 16 '21 at 19:12

1

You can try this

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

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

answered May 16 '21 at 19:12

VersifiXion

2,152
5
22
40

Local image show not show up in React JS

2 Answers2