下一个图像，图像随着布局响应而消失答案

【问题标题】：Next Image, image disappears with layout responsive下一个图像，图像随着布局响应而消失
【发布时间】：2021-09-16 05:26:17
【问题描述】：

我正在尝试将 Next Image 组件添加到我的项目中。

我有一个问题，当我添加layout='responsive'时图像消失了。

代码：

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

有解决办法吗？或任何其他优化图像的方法？

【问题讨论】：

在容器内添加宽260高56

标签： reactjs next.js nextjs-image

【解决方案1】：

为 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

【讨论】：

【解决方案2】：

你需要将next/image包装到一个带有display:block的容器中，这样图片才会显示出来。

【讨论】：

【解决方案3】：

根据此处 (https://github.com/vercel/next.js/issues/19314) 的发现，layout='responsive' 似乎没有内在大小。所以你必须为包含的元素添加一个宽度。

【讨论】：