Estoy empezando a reaccionar con strapi y no puedo mostrar una imagen correctamente.

Mi colección de "animales" tiene un campo de "imagen" que se usa para mostrar una imagen.

Sin embargo, no puedo mostrar la imagen (que está en carga)

De hecho, no puedo mostrar los datos que están en la imagen.

Gracias a todos los que me ayudarán

 import { useEffect, useState } from 'react'; import axios from 'axios' function AnimauxListe() { const [error, setError] = useState(null); const [Animaux, setAnimaux] = useState([]); const api_url = "http://localhost:1337/" useEffect(() => { axios .get('http://localhost:1337/api/animaux?populate=*') .then(({ data }) => setAnimaux(data.data)) .catch((error) => setError(error)) }, []) if (error) { // Print errors if any return <div>An error occured: {error.message}</div>; } return ( <div className="App"> <h2> Affichage des animaux présents dans la base de données</h2> <ul> {Animaux.map(animal => <div key="animal.attributes.id" className="card" > <img src={animal.attributes.image.url} className="card-img-top" alt="raté"/> <div className="card-body"> <h5 className="card-title">{animal.attributes.image.url}{animal.attributes.nom}</h5> <p className="card-text">{animal.attributes.Description}</p> <p>{animal.attributes.image.url}</p> <a href="#" className="btn btn-primary">Voir {animal.attributes.nom}</a> </div> </div> )} </ul> </div> ) }

En mi código, solo intento recuperar la URL de la imagen por el momento, pero es imposible. Con todas las actualizaciones, no puedo encontrar un tema que coincida con mi problema con una solución que lo solucione. gracias

ingrese la descripción de la imagen aquí