Почему js ведёт себя не так так ожидается?

Question

[Максим]

Я хочу в зависимости от соотношения сторон изображения получить в кансоле уведомление
Делаю это так:

let images = document.querySelectorAll("img");

images.forEach(function(url){
    
    let img = new Image();
    img.src = url;
    img.onload = e = console.log(url, ar(img));
    
 
})

function ar(img){
    if(img.width > img.height) {
        return"Альбом"
    }
    
    if(img.width < img.height) {
        return"Портрет"
    }
    
    if(img.width == img.height) {
        return"Квадрат"
    }
}

Разумеется что существует папка img в которой три изображения разных соотношений сторон
1) Вертикальная
2) Альбомная
3) Квадратная

В index.html просто написано

<img src="img/pic1.png" alt="">
 <img src="img/pic2.png" alt="">
 <img src="img/pic3.png" alt="">

Но в кансоль выводит вот это :



Почему такой вывод когда ожидается вывести то что в return и не выводится url ?

Решение на скрине

images.forEach(function(url){
    let img = new Image();
    img.src = url.src;
    img.onload = function() {
        console.log(url.src, ar(this));     
    }
});

Answer 1

[Glorious Cat]

'use strict';

const imgShape = img => {
  let h = img.getBoundingClientRect().height,
    w = img.getBoundingClientRect().width;

  if (h > w) return img.getAttribute('src') + ' Портрет';
  if (h < w) return img.getAttribute('src') + ' Альбом';
  if (h === w) return img.getAttribute('src') + ' Квадрат';
}
document.querySelectorAll('img').forEach(item => console.log(imgShape(item)));

Comments

[Glorious Cat]

Если свойство (атрибуты, методы и т.д. и т.п.) HTML элемента ничего не показывает или undefined, то смотрите какие свойства есть у тега через console.dir(HTMLElement). По крайней мере я так делаю. :))

[Максим]

Glorious Cat, если посмотрите в мой вопрос - я решение давно уже сделал - просто глупо отмечать свой собственный ответ решением - я вынес решение в заголовок и всё

[Glorious Cat]

Максим Ленский, простите, внимательно не читал. Сразу решение принялся писать. :D

[Максим]

Glorious Cat, бывает ...у меня тоже затык щас ...js мало знаю .. click да ещё какую то мелочь а вот сложнее чтото жесть ..

[Glorious Cat]

Максим Ленский, Здесь в forEach вы в url передаёте само изображение, поэтому в консоли и выводился DOM элемент.

images.forEach(function(url){
    let img = new Image();
    img.src = url; 
    img.onload = e = console.log(url, ar(img));
})

[Максим]

Glorious Cat, img.src = url.src;

[Glorious Cat]

Максим Ленский, с тем же успехом можно было написать вот так:

images.forEach( url => console.log( url.src, ar( img ) ) );

Answer 2

[Robur]

e = console.log(url, ar(img));

поменяйте на e => console.log(url, ar(img));

ну или поменяйте свои ожидания :)

Comments

[Максим]

images.forEach(function(url){
    
    let img = new Image();
    img.src = url;
    img.onload = e => console.log(url, ar(img));
    
 
})

GET http://127.0.0.1:5500/[object%20HTMLImageElement] 404 (Not Found)

так что то не то ...

[Максим]

[Robur]

Максим Ленский, это уже совершенно другая проблема. ответ на нее слишком очевиден чтобы не дать вам возможности найти его самостоятельно.

[Максим]

Robur, да да ...я бы не задал этот вопрос

[Максим]

Answer 3

[Артур]

так в url приходит весь тег img, а не только путь

Comments

[Максим]

в том и вопрос : 1) как вывести только url 2) вывести верное сообщение

[Ihor Bratukh]

Максим Ленский, img.src или img.getAttribute('src')

[Максим]

Ihor Bratukh, я уже ответил в собственном вопросе ...но ваш пример не работает ..посмотрите в Заголовке моего вопроса ...