La imagen no se ha cargado cuando está iniciando sesión en la consola. Puede crear un detector de eventos que espere a que se cargue la imagen y luego mostrará la altura adecuada.

 function loaded() { let height = document.getElementById('d').clientHeight; console.log(height); } const img = document.getElementById('img'); if (img.complete) { loaded() } else { img.addEventListener('load', loaded) }

 img{ height:100%;}

 <div id = 'd'> <img id='img' src="https://via.placeholder.com/100x150"> </div>

Debido a que la imagen no se ha cargado cuando se ejecuta su código:

 setTimeout(() => { let height = document.getElementById('d').clientHeight console.log(height); }, 1000)

 <div id = 'd'> <img src="https://via.placeholder.com/100x150"> </div>

Si su código depende de conocer la altura de la imagen para ejecutarse correctamente, debe verificar si la imagen está cargada y esperar hasta que lo esté si aún no lo ha hecho .

El evento de carga se activa cuando se ha cargado toda la página, incluidos todos los recursos dependientes, como hojas de estilo e imágenes. Esto contrasta con DOMContentLoaded, que se activa tan pronto como se carga el DOM de la página, sin esperar a que los recursos terminen de cargarse.

 addEventListener('load',(event)=>{ let height = document.getElementById('d').clientHeight console.log(height); });