根据这里发现的（https://github.com/vercel/next.js/issues/19314），似乎layout='responsive'没有固有大小。因此，您必须为包含元素添加宽度。

您需要将next/image Package 到包含display:block的容器中，以便显示图像。

设置Image组件父级的高度和宽度：

<Box width={263} height={56}>
    <Link href='/' >
        <Image src='/images/logoDark.svg'
            alt='navbar-logo'
            width={260}
            height={56}
            layout='responsive'
        />
    </Link>
</Box>

确保父元素在其样式表中使用display: block，如Box组件或div

组件

<div className="photo">
    <Image
    width={300}
    height={300}
    src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
    alt="photo"
    layout="raw"
    />
</div>
<style jsx>{`
    @media (max-width: 768px) {
        .photo {
        margin: 0 auto;
        justify-content: center;
        display: flex;
        width: 200px;
        height: 200px;
        }
    }
`}</style>

next.config.js

experimental: {
 images: {
  layoutRaw: true,
 },
},

这对我很有效，图像不会消失，而且有React，

layout = responsive不再有效，已弃用。这是如何在Nextjs中使用Image响应的

<Box
        position={'relative'}
        width={526}
        height={526}
      >
        <Image
          src={Myimage}
          fill
          alt=''
        ></Image>
      </Box>

确保你用Box Package Image，并给予它一个宽度和高度，如果你在Image中使用'fill' prop，也要给position='relative'}。
图像响应像一个魅力！！！