'How to add image in a React component from local path in img tag

I am using the below img tag in my React component but the image is not displaying when I am taking the image source from a local path.

<img class="masthead-avatar mb-5" src="public/css/avataaars.svg" alt="..." />

Solution 1:^[1]

why you are not trying this

import image from "./public/css/avataaars.svg"

<img src={image} alt="image" />

or if you want to use svg as a component you can try

import {ReactComponent as SvgIcon} from "./public/css/avataaars.svg"

<SvgIcon/>

you can try this -:

using require ...

<img src={require(`public/css/avataaars.svg`)} alt="" />

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source
Solution 1	Eisa Rezaei
Solution 2	Prakash Solanki