I am using NextJS's native <Image /> component to render images in my app.

Some images, appear on prompts such as a popup newsletter prompt. The thing is, the prompt is only mounted in the DOM when it needs to be displayed (as with most React components). It does not "live" inside the DOM in a display: none; state as it used to be with jQuery websites. It either exists and is visible, or does not exist at all.

The problem is that the image only starts to get loaded once it is first mounted. I am thinking that there may be a NextJS approach to tell the framework to start loading the image even though it is not yet mounted. So that we save the user those awkward .3s of blank prompt before an image bluntly appears before there eyes.

Are there any workarounds for this? Or should I go back to the old ways and have my prompts mounted from start, and switch their display property?