No puedo insertar una imagen en mi página de registro. He intentado insertarlo usando index.js (códigos HTML en el componente React) y también en el archivo CSS correspondiente. Ambos no funcionan. Compartiendo los códigos y la captura de pantalla a continuación (he eliminado los códigos de importación irrelevantes):
Código del componente de reacción:
import styles from "./register.css"; return( <div> <div id="styledImg"> <img alt="" title="" src="../../src/assets/bocLogo.png"/> </div> </div> ); } export default Register;Código CSS:
#styledImg { width: 1110px; height: 428px; height: 428px; position: absolute; top: 245px; left: 87px; } #styledImg Img { max-width: 100%; max-height: 100%; }Tienes que cargar esa imagen como ReactComponent. import { ReactComponent as Logo } from "../../assets/your-image.png"; Entonces eso debería verse como:
import styles from "./register.css"; import { ReactComponent as Image } from "../../assets/your-image.png" return( <div> <div id="styledImg"> <img alt="" title="" src={Image}/> </div> </div> ); } export default Register;Tienes que importar la imagen y luego usar el archivo importado como src . sería algo como esto.
import logo from '.../../src/assets/bocLogo.png'; y luego usarás este logo en src
<img src={logo} alt="Logo" />;para obtener más información, consulte este enlace