Hola chicos, he estado luchando con esto durante bastante tiempo. Quiero implementar un logotipo en mi componente de navegación, pero solo se muestra como una imagen rota. Especifiqué dónde está exactamente el archivo, pero aún aparece como un archivo img roto.
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;¿Algún consejo sobre lo que pude haber hecho mal?
AIT
Es posible que desee agregar su imagen como
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;