Angular: Как получить ширину и высоту изображения перед тем, как поместить его в DOM

Question

Я довольно плохо знаком с Angular & Typescript, и это может показаться глупым вопросом.

У меня есть массив URL-адресов / метаданных изображений, загруженных из локального .json сервисом.В компоненте просмотра одного изображения у меня есть:

...
<img [src]="my_picture.large" [alt]="my_picture.title">
...

Я бы хотел получить больше информации о my_picture.large ПЕРЕД загрузкой в ​​DOM.Является ли это возможным?Например, я хотел бы знать его ширину и высоту, его пропорции и реагировать с другим шаблоном, если портрет или пейзаж.

Конечно, я мог бы добавить метаинформацию в файл json, но какЯ сказал, прежде чем я учусь, и я пытаюсь найти лучший угловой способ решения проблем.:)

Смежный вопрос: Можно ли предварительно загрузить изображения перед их помещением в DOM?

Answer 1

Попробуйте это:

    const determineDimensions = (ImageUrl) => {   
    const img = new Image();
    img.onload = function(){
        console.log(this.width, this.height);
    };
    img.src = ImageUrl;
    }