htmlreactjsimageimagesource

Image source not finding the image

I am trying to add a image in my React component but for some reason the alternative text is always displayed

This is how I am reaching for the picture in the component Navbar

<img src="../assets/images/nav_logo.png" alt="Petapilot" className="site-logo"></img>

And this is my project structure

enter image description here

Is my path wrong?

Solution

  • Depending on how webpack bundles your files, when React compiles, the images may be somewhere else.

    Try this approach:

    import NavLogo from '../assets/images/nav_logo.png';


<img src={NavLogo} alt="Petapilot" className="site-logo"></img>