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?
Aunque cueste verlo, en lo rojo redondeado está el atributo alt.