用strapi显示图像和反应

Question

我开始对Strapi进行反应，但无法正确显示图像。

我的“动物”集合具有一个“图像”字段，用于显示图像。

但是，我无法显示图像（即将上传）

，实际上我无法显示图像中的数据，

这要归功于所有会帮助我

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

使用代码的人，我只是想检索URL目前的图像，但不可能。通过所有更新，我找不到将我的问题与解决问题的解决方案相匹配的主题。 谢谢

在此处输入图像描述

Answer 1

尝试

const [Animaux, setAnimaux] = useState([]);

用这条线替换这条线

const [animaux, setAnimaux] = useState([]);
...
{animaux.map(animal => return (
       <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>
)}