问API调用中无法访问图像URL

EN

import React, { Component } from 'react'
import axios from "axios";
import { Card} from "react-bootstrap";

export default class App extends Component {
  state = {
    data: []
  };

  componentDidMount() {
    this.fetchCountryData();
  }
  fetchCountryData = async () => {
    const url = "https://api.thecatapi.com/v1/breeds";
    try {
      const response = await axios.get(url);
      const data = await response.data;
      this.setState({
        data
      });
     
    } catch (error) {
      console.log(error);
    }
  };
  render() {
    return (
      <div className="App">
      <h1>React Component Life Cycle</h1>
      <h1>Calling API</h1>
      <div>
        {
          this.state.data.map((item, id) => (
          <div key={id}>
            {console.log(item)}



            <Card style={{ width: '18rem' }}>
            {/* <Card.Img variant="top" src={item.image.url} /> This part is giving me the problem  */}
        <Card.Body>
        <Card.Title>{item.name}</Card.Title>
        <Card.Text>
        {item.origin}
      </Card.Text>
      <Card.Text>
      {item.temperament} 
      </Card.Text>
      <Card.Text>
      {item.weight.metric} 
      </Card.Text>
      <Card.Text>
      {item.description} 
      </Card.Text>
    {/* <Button variant="primary">Go somewhere</Button> */}
    </Card.Body>
  </Card>









            {/* { <img src={item.image.url} alt=""/> }  Please why is this not working ? */}
            {/* {item.name} <br/>
            {item.origin} <br/>
            {item.temperament} <br/>
            {item.life_span} <br/>
            {item.weight.metric} <br/>
            {item.description} <br/> */}

          </div>
          ))
        }
        
      </div>
    </div>
    )
  }
}