javascript - 如何获取 Vuetify v-img 的 naturalSize？

Question

所以我需要使用 Vuetify v-img 获取页面中显示的图像的大小。我试图通过这样做来获得 naturalHeight 和 naturalWidth 的大小:

//markup
<v-img ref="imageShow" @load="getSizes" src"/images/background.jpg"></v-img>

//method
getSizes(){
   console.log(this.$refs.imageShow.naturalHeigth)
}

但它没有显示尺寸，它返回未定义。

Answer 1

Vuetify 的 v-img组件呈现 <div> HTML 元素而不是 <img>和 naturalHeight和 naturalWidth仅在 <img> 上工作HTML 元素。我检查了 Vuetify's documentation对于 v-img而且它似乎没有配置 html 标签的属性。

HTMLImageElement.naturalHeight reference