React: access images that found in public folder inside src folder

Question

I have a staff monitoring project, and within this project I want to create a dialog, and inside the dialog there is a group of data, and I want to display an image inside the dialog, but I have this problem even though I am setting the correct path to the location of the image:

Module not found: You attempted to import ../../../public/static/Globe.svg which falls outside of the 
project src/ directory. Relative imports outside of src/ are not
 supported.

How can I solve the problem?

   const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Button variant="outlined" color="primary" onClick={handleClickOpen}>
                Open form dialog
            </Button>
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">

                <DialogContent>
                    <img alt="Smiley face" src="../../../public/static/Globe.svg" />
                </DialogContent>
                <Divider />
                <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        To subscribe to this website, please enter your email address here. We will 
                        send updates
                        occasionally.
                    </DialogContentText>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="name"
                        label="Email Address"
                        type="email"
                        fullWidth
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose} color="primary">
                        Subscribe
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

And this is the directory structure:

(public ->static->globe.jpg) 
then i have src folder 
(src->pages ->dashboard->spaces.tsx)
 And I am summoning the image in "spaces.tsx" file

Answer 1

I solved the problem. You don't need any webpack configuration for this..

In your component just give image path. By default react will know its in public directory.

   <img src="/image.jpg" alt="image" />