0

Estoy realizando un proyecto académico sencillo de una calculadora y los componentes no se apilan correctamente al renderizarlos, me estoy basando en un ejemplo de internet en donde a ellos si les funciona.

    "App.js"

    import './App.css';
    import imagenFuego from './imagenes/fuego.png';
    import Boton from './componentes/Boton';
    import Pantalla from './componentes/Pantalla';

    function App() {
      return (
        <div className="App">
          <h1>Super Calculadora 5000</h1>
          <div className='contenerdor-imagen'>
            <img
            scr={imagenFuego}
            className='imagen-fuego' 
            alt='Se supone que debería verse fuego'/>
          </div>    
          <div className='contenedor-calculadora'>
          <div>
            <Pantalla />
          </div>  
          <div className='fila'>
            <Boton>1</Boton>

También noto que al renderizar no me salen la imagen que importé, soy nuevo con react agradezco la ayuda, no puedo agregar todo el código porque no me deja la aplicación.

Aplicación cuyos componentes no se ven apilados y no se visualiza la imagen importada

  "App.css"
    .App {
      width: 100%;
      height: 100vh;
      padding-top: 40px;
      background-color: blueviolet;
      font-family: Times, 'Times New Roman', serif;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

}

   .contenedor-imagen {
     width: 100%;
     height: 50px;
     margin: 100px;
     display: grid;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     border-radius: 20px;
     border: 5px solid rgb(255, 255, 255);

}

  .imagen-fuego {
    height: 40px;
    width: 60px;
    flex-wrap: wrap;

}

1
  • La imagen no se muestra por la propiedad que tienes, cambia de scr a src. Podrías mencionar mencionar qué exactamente no renderiza ?
    – esphinx
    Commented el 1 feb. 2023 a las 23:28

1 respuesta 1

0

En App.css, en la clase .App, debes añadir flex-direction: column; para que se apilen los elementos por si solos. A partir de ahí tu modificas tamaños y demás.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.