Estoy usando el componente <Image /> nativo de NextJS para representar imágenes en mi aplicación.

Algunas imágenes aparecen en avisos, como avisos de boletines emergentes. La cuestión es que el indicador solo se monta en el DOM cuando es necesario mostrarlo (como ocurre con la mayoría de los componentes de React). No "vive" dentro del DOM en una display: none; estado como solía ser con los sitios web jQuery. O existe y es visible, o no existe en absoluto.

El problema es que la imagen solo comienza a cargarse una vez que se monta por primera vez. Estoy pensando que puede haber un enfoque de NextJS para decirle al marco que comience a cargar la imagen aunque aún no esté montada. Para que le ahorremos al usuario esos incómodos .3s de aviso en blanco antes de que una imagen aparezca sin rodeos ante sus ojos.

¿Hay alguna solución para esto? ¿O debería volver a las formas anteriores y montar mis avisos desde el principio y cambiar su propiedad de visualización?