我想在以编程方式呈现图像之前预加载图像。示例：

<Image
        src={
          color === "yellow"
            ? Yellow
            : color === "blue"
            ? Blue
            : Red
        }
        alt="color image"
        priority
        fill
        sizes="250px"
      />

字符串
如果color的默认值为"yellow"，则优化的黄色图像将在页面加载时呈现。
例如，当通过菜单将color的值更改为"blue"时，蓝色图像将被加载和渲染。加载需要一段时间，因此图像将在一点延迟后显示。
如何预加载所有三个图像黄色，蓝色和红色，以便在页面加载时更改color的值时立即显示它们，而不会失去NextJS <Image/>组件的好处？
我尝试使用<Image/>组件的priority和loading属性，但如果图像不应该被渲染，它们就没有效果。