reactjs - 下一个图像，图像随着布局响应而消失

Question

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

我有一个问题，当我添加layout='responsive'.

代码：

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

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

Answer 1

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

Answer 2

您需要将 包装next/image到一个容器中display:block，以便显示图像。

Answer 3

为 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