NextJS应用中无法展示API获取图片的问题求助

首先明确Dog.ceo API的返回结构：请求breeds/image/random/3时，返回的是包含message（图片URL数组）和status的对象，不存在results字段。你的代码核心问题是对API返回数据的结构理解有误，导致取值逻辑错误。

修复后的完整代码 #

const defaultEndpoint = "https://dog.ceo/api/breeds/image/random/3";

export async function getServerSideProps() {
  const res = await fetch(defaultEndpoint);
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function Home({ data }) {
  console.log("data", data);
  // 直接从data中取出正确的message数组，设置空数组默认值避免报错
  const { message = [] } = data;
  return (
    <div className={styles.container}>
      <Head>
        <title>Dog Breed App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="grid">
          {/* 遍历message数组，每个元素就是图片URL */}
          {message.map((imageUrl) => {
            return (
              <div key={imageUrl}>
                <img src={imageUrl} alt="Random dog breed" />
              </div>
            );
          })}
        </div>
      </main>
    </div>
  );
}

关键修改说明 #

• 替换解构字段：把const { results = [] } = data;改为const { message = [] } = data;，对应API返回的正确字段
• 调整循环逻辑：message数组的每个元素本身就是图片URL，无需再从元素中解构message属性
• 补充alt文本：给img标签添加有意义的替代文本，符合网页可访问性要求

内容的提问来源于stack exchange，提问作者Anna Nettles