0

Hola que tal tengo un componente en el que con jsx retorna lo siguiente lo siguiente

const [notes, setNotes] = useState([]);

 return (
    <div className={darkMode ? 'dark-mode' : ''}>

    <div className="container">
      <Header 
        handleToggleTheme={setDarkMode}
      />
      <Search 
        handleSearchNote={setSearchText}
        setShowNote={setShowNote}
        />
      {notes.length===0 ? 
        <div className="notes-empty-img">
          <img src="./img/paper.png" alt="paperImg" />
        </div>
        :

      <Pagination 
        data={filterNotes} 
        handleAddNote={addNote}
        handleDeleteNote={deleteNote}
        searchText={searchText}
        />
      }
    </div>
    </div>
  )

Básicamente, si la variable notes tiene un array vacío, mostrar una imagen, (la ruta ya he comprobado que es la correcta), en caso contrario va a mostrar lo que viene siendo la información de la aplicación, el componente Pagination.

He dado los siguientes estilos css pero no cambia nada

.notes-empty-img{

    width: 600px;
    height: 600px;
}
.notes-empty-img img{
    max-width: 100%;
    object-fit: cover;
}

No muestra la imagen pero sí muestra el atributo alt, eso es lo que me extraña, así que la lógica entiendo que es correcta. Se os ocurre que puede estar pasando?

introducir la descripción de la imagen aquí

Aunque cueste verlo, en lo rojo redondeado está el atributo alt.

1 respuesta 1

1

Pues supongo que el error es en la ruta de la imagen, por tal como la tienes en la misma carpeta que está el componente que estás mostrando tienes una carpeta que se llama img y en ella el archivo. Cerciorate de que está bien la ruta. Para no tener errores, es mejor importar el archivo como una variable y mostrar esa variable en el src del componente:

import srcImage from "./img/paper.png"; //ejemplo de ruta

<img src={srcImage} alt= "" />

Si hubiera un fallo en la ruta, te saltaría un error porque no encuentra el archivo.

2
  • Pues sí! importando la imagen de ese modo la toma correctamente. ¿Por qué ocurren estas cosas si la ruta acaba siendo la misma? Muchas gracias ^^ Commented el 12 jul. 2022 a las 13:12
  • Pues no estoy muy seguro, pero es algo de la ruta absoluta o no se muy bien posiblemente si la pones como la tenías antes no busca en la raiz del componente, sino en la carpeta public que genera react y donde está el archivo html. Si pruebas a colocar ahí la imagen y probar como la tenías antes, posiblemente te funcione. De la manera que te dije, este donde este el archivo, al importar la ruta, siempre va a ser la correcta.
    – Suso
    Commented el 12 jul. 2022 a las 13:22

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.