Image source not finding the image

Question

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

Is my path wrong?

Answer 1

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>

Answer 2

You need to import the image to your component like this

import logo from '../assets/images/nav_logo.png'

And then use it like thisin your img tag

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

Answer 3

giving relative path to the image won't work in this case, You can keep it in the public folder and give absolute path of the imags or you can import the image like this

import Img from '../assets/images/nav_logo.png';
..
....
.....
<img src={Img} alt="Petapilot" className="site-logo"/>