有没有办法加载图像但从 DOM 中隐藏它们？

Question

我正在 React 和 Next.js 中构建一个 memory 游戏，我正在使用 pokeapi 加载 pokeapi 数据，如 pokemon 名称、图像等。

我想从 pokeapi 预加载图像，但将它们隐藏在 DOM 中以避免恶意用户检查 HTML。

如果我像这样有条件地出示卡片：

          {isSwitchedCard && (
            <NextImage
              src={card.image}
              width={150}
              height={150}
              alt={card.name}
              draggable={false}
              className="m-5 rounded-t-lg"
            />
          )}

当用户点击它时，图像会加载，对于某些网络不好的用户来说，它可能会花费太多时间。

所以我寻找一种解决方案来从 API 预加载图像但将它们隐藏在 DOM 中，有什么想法吗？