Hey guys I've been struggling with this for quite a while. I want to implement a logo into my nav component, but it just renders as a broken image. I specified where the file is exactly but it still appears a broken img file.
import './Nav.css';
import "https://kit.fontawesome.com/3d7d8906d0.js";
import { Link } from 'react-router-dom';
const Nav = () => {
return(
<nav>
<img src='../components/assets/logo.png'/>
<ul>
<Link to="/"><li className='dashboard'><i class="fa-solid fa-gauge"></i></li></Link>
<Link to="Compare"><li className='compare'><i class="fa-solid fa-scale-balanced"></i></li></Link>
<Link to="Timeline"><li className='timeline'><i class="fa-solid fa-timeline"></i></li></Link>
<div className='about'>
<p>About LOLDATA</p>
<p>About the API</p>
</div>
</ul>
</nav>
)
}
export default Nav;
Any tips on what I could have done wrong?
T.I.A
You may want to add your image like
import React from 'react';
import './Nav.css';
import "https://kit.fontawesome.com/3d7d8906d0.js";
import { Link } from 'react-router-dom';
import logo from '../components/assets/logo.png'; // Tell webpack this JS file uses this image
const Nav = () => {
return(
<nav>
<img src={logo}/>
<ul>
<Link to="/"><li className='dashboard'><i class="fa-solid fa-gauge"></i></li></Link>
<Link to="Compare"><li className='compare'><i class="fa-solid fa-scale-balanced"></i></li></Link>
<Link to="Timeline"><li className='timeline'><i class="fa-solid fa-timeline"></i></li></Link>
<div className='about'>
<p>About LOLDATA</p>
<p>About the API</p>
</div>
</ul>
</nav>
)
}
export default Nav;