Image not showing uo on webpage react-CodePudding

This is crazy, but I have no idea why it won´t work. Don´t know if I´m burned out our so, but im currently making a new webpage and want to have a logo at the top left hand corner in my navbar. For Some reason the image just wont show up, only the alt text. No idea what could be wrong there, because the path is 100% correct:

All code im using:

const TopNav = () => {
  return (
    <nav className="navbar-top">
      <img src="./logo.png" alt="Logo" />
      <div className="flex-container">
        <li>Item 1</li>
        <li>Item 2</li>
      </div>
    </nav>
  );
};

export default TopNav;

All that´s showing up is the alt text. Any ideas? Thanks!

CodePudding user response：

you have to import the image before inserting if it's coming from a directory and not a link.

like this:

import logo from './logo.png'

then you insert it like this:

<img src={logo} alt="Logo" />

CodePudding user response：

You need to use require() to add your image path into it. This is how you will write it:

<img src={require('./logo.png')} alt="logo"/>