Extract the Height of a Lazy Loaded Image Using Gridsome and Sanity

I use Gridsome to build static pages with Sanity as the source. In my building used https://www.sanity.io/docs/image-url to load images. I also use vue-lazyload.
I would like a placeholder the same size as the picture before the picture is finished loading. The width is usually 100% of the container. But the height of the image is dynamic.

Is there any possibility to extract the height of the image before the image is loaded?

If you know the image URL then sanity images always have the image size in the url. e.g.

Great, I have not noticed that the size of the image is part of the image name. It can solve my challenge with reflow.
Thanks!

you can also GROQ the metadata like image width/height/aspectRatio https://www.sanity.io/docs/image-type#df3f768ce073

probably a nicer way of doing it

I was looking at that but didn’t know how 🙂

always fun to poke around in the image asset properties with Vision

A follow-up question: I made it work for a photo field. I also have a text field (_rawBody). How can I change the query so that images included in the text field also include metadata?
I use the Sanity Gridsome template
https://www.sanity.io/create?template=sanity-io/sanity-template-gridsome-blog if it is helpful to know.