Acabo de empezar a trabajar con reaccionar recientemente, pero me he encontrado con un problema con el proyecto en el que estoy trabajando en el que intento mostrar una lista de iconos con enlaces.
al almacenar el src para cada ícono en la lista a continuación, detiene la representación de toda la página y registra un error de que no puede encontrar la imagen. Si pego el scr directamente en el código, no hay ningún error al cargar las imágenes, pero para la reutilización y la legibilidad, pensé que sería una buena práctica mapear una lista en componentes HTML en su lugar.
import SideLinksCss from './sideLinks.module.css'; export default function SideLinks() { const links = [ { name: "linkedin", url: "", src: "../assets/linkedin-icon.png" }, { name: "github", url: "", src: "../assets/github-icon.png" }, ] return ( <div className="side-links"> <ul> {links.map(link => <li> <a> <img src={link.src} alt={link.name} /> </a> </li> )} </ul> </div> ); }si hay algo tonto que me falta, me encantaría escucharlo, ya que soy nuevo en reaccionar, o si hay una mejor manera de hacerlo.
Debido a que las imágenes no se importan en la parte superior del archivo, se requiere que use require() dentro de la lista de enlaces y no dentro de la función de mapeo. Si cambia el código a
import SideLinksCss from './sideLinks.module.css'; export default function SideLinks() { const links = [ { name: "linkedin", url: "", src: require("../assets/linkedin-icon.png") }, { name: "github", url: "", src: require("../assets/github-icon.png") }, ] return ( <div className="side-links"> <ul> {links.map(link => <li key = {link.name}> <a> <img src={link.src} alt={link.name} /> </a> </li> )} </ul> </div> ); }mostrará correctamente las imágenes
No necesita importar o solicitar las imágenes. Simplemente colóquelos en la carpeta public y estarán disponibles. Entonces puedes hacer:
function App() { const links = [ { alt: "fig1", src: "./0001.jpg", }, { alt: "fig2", src: "./0002.jpg", }, ]; return ( <div className="App"> <ul> {links.map((link) => ( <li key={link.alt}> <a> <img src={link.src} alt={link.alt} /> </a> </li> ))} </ul> </div> ); } export default App;