Next.js 图片组件错误 src 缺失答案

【问题标题】：Next.js Image component error src missingNext.js 图片组件错误 src 缺失
【发布时间】：2021-06-26 12:11:36
【问题描述】：

我在尝试使用 next.js 图像组件时出现以下错误。

Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {}

传入的src值为：

https://res.cloudinary.com/mward82/images/q_auto:eco/v1616884491/1E3EDA11-D657-4FBD-8123-EFE0C5F43AC8_idzuc7/1E3EDA11-D657-4FBD-8123-EFE0C5F43AC8_idzuc7.webp

当我使用img 而不是Image 时，我可以确认这一点。

以下是有问题的代码，来自components/cover-image.js

import cn from "classnames";
import Link from "next/link";
import Image from "next/image";

export default function CoverImage({ title, coverImage, slug }) {
  const image = (
    <Image
      src={coverImage?.sourceUrl}
      height={coverImage?.mediaDetails.height}
      width={coverImage?.mediaDetails.width}
      className={cn("shadow-small", {
        "hover:shadow-medium transition-shadow duration-200": slug
      })}
    />
  );
  console.log(coverImage);
  return (
    <div className="sm:mx-0">
      {slug ? (
        <Link as={`/posts/${slug}`} href="/posts/[slug]">
          <a aria-label={title}>{image}</a>
        </Link>
      ) : (
        image
      )}
    </div>
  );
}

我的next.config.js 文件包含以下内容：

module.exports = {
  images: {
    domains: ["res.cloudinary.com"]
  }
};

你可以看到我的沙盒的分叉副本

https://codesandbox.io/s/script-hungryvercelapp-forked-7wd9e

【问题讨论】：

相当烦人的是，当部署到 vercel 时，它在沙箱之外工作：/
coverImage prop 值是否依赖于 API？
是的。它来自无头 Wordpress 安装
那么，到那时coverImage的值在这里，这个组件被渲染并且Image组件的src值是空的，一定会发生什么
太棒了...原因一定是我认为我在上面的cmets中提到的。

标签： javascript next.js

【解决方案1】：

问题是我的页面列出了不包含图片的帖子。修改components/cover-image.js中的代码检查coverImage是否存在解决了问题。

将返回部分中对image 的两个引用更改为coverImage && image，以便image 组件根据coverImage 的存在呈现条件。

这是工作的components/cover-image.js：

import cn from "classnames";
import Link from "next/link";
import Image from "next/image";

export default function CoverImage({ title, coverImage, slug }) {
  const image = (
    <Image
      src={coverImage?.sourceUrl}
      height={coverImage?.mediaDetails.height}
      width={coverImage?.mediaDetails.width}
      className={cn("shadow-small", {
        "hover:shadow-medium transition-shadow duration-200": slug
      })}
    />
  );
  console.log(coverImage);
  return (
    <div className="sm:mx-0">
      {slug ? (
        <Link as={`/posts/${slug}`} href="/posts/[slug]">
          <a aria-label={title}>{coverImage && image}</a>
        </Link>
      ) : (
        coverImage && image
      )}
    </div>
  );
}

感谢 Yash Sangai 将我推向正确的方向。

【讨论】：