I'm starting react with strapi and I can't display an image correctly.

My "animals" collection has an "image" field which is used to display an image.

However, I can't display the image (which is in upload)

In fact, I can't display the data that is in the image

Thanks to everyone who will help me

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>
  )
}

On my code, I'm just trying to retrieve the url of the image for the moment but impossible. With all the updates I can't find a topic that matches my problem with a solution that fixes it. thank you

enter image description here