如何在 NextJs 中预加载尚未渲染的图像

Question

我正在使用 NextJS 的本机<Image />组件在我的应用程序中渲染图像。

某些图像出现在提示中，例如弹出新闻通讯提示。问题是，提示仅在需要显示时才安装在 DOM 中（与大多数 React 组件一样）。display: none;它不像以前在 jQuery 网站中那样“存在”在 DOM 中。它要么存在并且可见，要么根本不存在。

问题是图像只有在首次安装后才开始加载。我认为可能有一种 NextJS 方法来告诉框架开始加载图像，即使它尚未安装。这样，在图像直接出现在用户眼前之前，我们就可以为用户节省 0.3 秒的尴尬空白提示。

有没有解决方法？或者我应该回到旧的方式并从一开始就安装我的提示，并切换它们的显示属性？