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?
TIA
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.