ingrese la descripción de la imagen aquí Tengo una carpeta Imágenes en mi escritorio con .jpg y .svg en mi archivo src que me gustaría agregar en un componente pero no puedo cargarlos. No entiendo que estoy haciendo mal. ¿Alguien puede ayudar?
import React from 'react'; import './Banner.css'; const Banner = () => { return ( <div className="banner"> <img src="../Images/banner.bg.jpg" alt="banner" /> <div className="text"> <img src='../Images/party-icon.svg' alt="party" /> <h3>Let's The Fun Begin!</h3> <p>Thanks for your order, we'll have it with you as soon as possible.<br></br> Your order number is #10293838 and a confirmation email has been sent to the address provided.</p> <p>Order Even Faster in Future</p> <button className="button">CREATE AN ACCOUNT</button> </div> </div> ); } export default Banner;1 - Sus imágenes deben estar dentro de la fuente de su proyecto (generalmente en una carpeta ' assets '/' images ').
2 - Asegúrese de que la ruta de origen en <img src='../Images/party-icon.svg' alt="party" /> sea relativa al archivo actual y apunte al party-icon.svg que se encuentra en su carpeta de activos.
Puede importar la imagen en la parte superior de esta manera:
import bg from '../Images/banner.bg.jpg'luego agrega tu foto así:
<img src={bg} alt="banner" />
Puedes hacer lo mismo con otras fotos. En lugar de bg puedes escribir lo que quieras. Elegir nombres apropiados para diferentes imágenes puede ser mejor.
Buena suerte :)
Puede importar esas imágenes separadas y usarlas en src , o puede usar require .
Si coloca su directorio de Images dentro de la carpeta pública, puede acceder a sus imágenes directamente de esta manera
src="/Images/banner.bg.jpg"Verifique las respuestas de esta pregunta ( ruta correcta para img en React.js ), creo que eso puede ayudarlo a comprender mejor esas soluciones.