Vue.js 画像URLから幅と高さを取得しようとしてはまった

こちらの記事どうり簡単に取得できるものだと思っていたけど、

var img = new Image();
img.src = 'http://image.src.com/image.jpg';
 
var width  = img.width;  // 幅
var height = img.height; // 高さ

vue.jsでやってみた時にはimg.widthやimg.heightが0だった。

調べているとstackoverflowなどでreturnが0だ！なんで！みたいな記事を見つけたがそもそもjavascriptの知識が乏しいのとjQueryを使ってどうにかしようとしている解決法をvue.jsでどうかくかわからなかった

知人に聞きこちらの記事を発見
https://www.raymondcamden.com/2019/06/13/reading-image-sizes-and-dimensions-with-vuejs

img.onloadという関数を使ってvar img = new Image();でできたimgを読み込まなきゃ画像の幅、高さを取得できないそうだ。

かつ、スコープの関係でonload内で使った変数を他で使うことはできないため、vue.jsのdataにプロパティを設定して、そこにセットする形になるそう。

vue.js

  export default {
    data () {
      return {
        new_image: []
      }
    },
    methods: {
      getImageSize (obj) {
        var img = new Image();
        img.onload = () => {
          this.new_image.push({width: img.width, height: img.height});
        }
        img.src = obj;
      }
    }
  }

// objには画像urlが入ります。