求助：NextJS <Image>组件在Flex列中覆盖其他内容的解决方法

Next.js 组件在Flex列布局中覆盖其他内容的问题 #

我在使用Next.js的<Image>组件时，遇到了图片渲染在Flex列布局中其他内容上方的问题；但使用React原生<img>组件时，显示效果符合预期。

以下是相关代码：

import React from "react";
import Image from "next/image";
import { ProjectType } from "../types/projectsTypes";

interface Props {
  project: ProjectType;
}

function ProjectSummary(props: Props) {
  function addHashTags(project: ProjectType): React.ReactNode {
    return (
      <>
        {project.summaryHashtags!.map((hashtag) => (
          <span
            className="inline-block pr-3 text-sm font-semibold text-sky-400"
            key={hashtag}
          >
            #{hashtag}
          </span>
        ))}
      </>
    );
  }

  return (
    <>
      <div
        tabIndex={0}
        id="p1"
        role="button"
        className="project-card relative flex max-w-sm flex-col overflow-hidden rounded-lg bg-slate-900 shadow-lg shadow-slate-600 transition delay-100 ease-out hover:-translate-y-1 hover:shadow-sky-400 focus:shadow-lg focus:shadow-highlight focus:outline-none"
      >
        {/* <img
          className="w-full"
          src={"https:" + props.project.summaryImageURL}
          alt=""
        /> */}
        <Image
          className="object-contain"
          src={"https:" + props.project.summaryImageURL}
          alt=""
          fill={true}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw"
        />
        <h3
          className="mx-4 pt-4 pb-1 text-xl font-bold text-sky-400"
          aria-label="Pocket open access project."
        >
          {props.project.projectTitle}
        </h3>
        <p className="mx-4 mb-4 text-base text-gray-400">
          {props.project.summaryDescription}
        </p>
        <div
          aria-label={props.project.summaryAriaHashtagsDescription}
          className="mx-4 mt-auto mb-4"
        >
          {props.project.summaryHashtags != undefined
            ? addHashTags(props.project)
            : null}
        </div>
      </div>
    </>
  );
}

export default ProjectSummary;

使用<Image>组件时，卡片显示效果：

使用React原生<img>组件时，卡片显示符合预期：

请问各位有什么解决该问题的思路吗？

谢谢，
Luke

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