时间戳

首页 > 解决方案 > 反应：图像 src 没有通过 API 走路径。图像未定义

javascript - 反应：图像 src 没有通过 API 走路径。图像未定义

问题描述

我是 Reactjs 的新手。我无法从 API 中提取图片网址。如果stackoverflow中已经存在类似类型的线程，我真的很抱歉。完整代码如下。我使用的 API 是：https ://api.thecatapi.com/v1/breeds

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Cat = ({
  cat: {name, image},
}) => {
  return(
    <div className='catMain'>
      <div className='catImage'>
        <img src={image.url} alt={name} />
      </div>
    </div>
  )
}

class App extends Component {
  state = {
    data: [],
  };
  componentDidMount() {
    this.fetchCatData();
  }
  fetchCatData = async () => {
    const url1 = "https://api.thecatapi.com/v1/breeds"
    const response = await fetch(url1)
    const data = await response.json()
    this.setState({
      data,
    })
  }
  render() {
    return (
      <div className='main'>
        <div className="cats">
          <div className="catsInfo">
            {this.state.data.map((cat) => (
              <Cat cat={cat}/>
            ))}
          </div>
        </div>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

错误信息：

标签： javascriptreactjsjsonapi

解决方案

如果你想显示每只猫，即使它们可能没有图像，你可以这样做：

const Cat = ({ cat: { name, image } }) => {
  return (
    <div className="catMain">
      {image && (
        <div className="catImage">
          <img src={image.url} alt={name} />
        </div>
      )}
    </div>
  );
};

然后你可以只显示你想要的关于猫的任何其他内容，而不必担心图像问题。

推荐阅读