trying to import an image in react-CodePudding

I'm just trying to import a png onto a navbar but I keep getting errors.

import React from "react";
import { Nav, NavLink, Bars, NavMenu } from "./navBarComponent";
import logo-light from "../logo-light.png";

const Navbar = () => {
return (
 <>
<Nav>
 <NavLink to="/">
<img src={"logo-light"} alt="logo" />
</NavLink>
<Bars />
<NavMenu>
<NavLink to="/ourcompany">Our Company</NavLink>
<NavLink to="/contact">Contact</NavLink>
<NavLink to="/locations">Locations</NavLink>
</NavMenu>
</Nav>
 </>
);
};

export default Navbar;

in vs code the "import logo-light from" part has red error lines under it. when I hover it says 'import... =' can only be used in typescript files. in the console it says:

I've tried moving the image to public, renaming the image, etc but nothing seems to work. what am I doing wrong?

CodePudding user response：

You don't have to write the same name as the filename You can use an alias name you want and import that directly in the src like below

   
import logolight from "../logo-light.png";

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