React中img标签无法显示API返回图片的问题求助

问题场景 #

在React项目中使用img标签无法展示API请求返回的图片，相关核心代码如下：

BlogCard组件 #

import React from "react";
import { Link } from "react-router-dom";
import "./styles.css";

const BlogCard = ({ coverPhoto, title }) => {
  return (
    <div className="card">
      <Link to={"/"}>
        <h2>{title}</h2>
        <img src={coverPhoto} alt="" height={200} width={200}></img>
      </Link>
    </div>
  );
};
export default BlogCard;

AllPost组件 #

import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
import BlogCard from "../Components/BlogCard";
const endpoint = "";

const QUERY = `
  {
    posts {
      id
      title
      slug
      coverPhoto {
        id
        url
      }
    }
  }
`;

const AllPost = () => {
  const { data, isLoading, error } = useQuery("blog_posts", async () => {
    const response = await axios({
      url: endpoint,
      method: "POST",
      data: {
        query: QUERY
      }
    });
    return response.data.data;
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  console.log(data.posts[1].coverPhoto.url, "hello");

  return (
    <div>
      <h1>Blog Posts Front End Development</h1>
      <ul>
        {data.posts.map((post) => (
          <BlogCard
            title={post.title}
            key={post.id}
            coverPhoto={post.coverPhoto}
          />
        ))}
      </ul>
    </div>
  );
};

export default AllPost;

错误原因 #

API返回的coverPhoto是包含id和url的对象，但BlogCard组件直接将该对象赋值给了img的src属性——src要求传入字符串类型的图片URL，而非对象，因此图片无法加载。

解决方案 #

提供两种可行修改方式：

方式一：修改传参，直接传递URL字符串 #

在AllPost组件的map循环中，将post.coverPhoto.url传递给BlogCard：

{data.posts.map((post) => (
  <BlogCard
    title={post.title}
    key={post.id}
    coverPhoto={post.coverPhoto.url}
  />
))}

此方式下BlogCard组件的img标签无需改动。

方式二：修改BlogCard组件，读取对象中的URL属性 #

在BlogCard组件中，将img的src指向coverPhoto.url，同时建议给alt属性设置有意义的值（如文章标题）：

<img src={coverPhoto.url} alt={title} height={200} width={200} />

额外注意 #

确保endpoint已正确配置，API能正常返回包含有效可访问图片URL的数据，这是图片正常加载的基础前提。

内容的提问来源于stack exchange，提问作者Python-Pirate