Javascript 如何获得Vuetify v-img的自然化？

因此，我需要使用Vuetify v-img获取页面中显示的图像的大小。 我试图通过这样做来获得自然高度和自然宽度的尺寸：

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

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

但是它没有显示大小，它返回未定义。

VImg渲染到，并将图像放在div中作为

它不是HTMLImageElement。 但是，您可能会滥用集成事件并访问它的，它是一个HTMLImageElement | null

getSizes(){
   // unless loading error
   const {naturalHeight, naturalWidth} = this.$refs.imageShow.image;
   console.log(naturalHeight, naturalWidth);
}

或者，您可以根据需要扩展此组件：

让vuetifyOptions； Vuetify.install{ 使用选项{ vuetifyOptions:{…选项} } } const VImg=vuetifyOptions.components.VImg； 导出默认值{ 扩展：VImg， 资料{ 返回{ 自然高度：空， 自然宽度：空 } } 装载{ this.naturalHeight=this.image.naturalHeight this.naturalWidth=this.image.naturalWidth 此.$emit'naturals'，此.image this.$emit'load'，this.src } } VImg在上渲染，并将图像放置在div中

它不是HTMLImageElement。 但是，您可能会滥用集成事件并访问它的，它是一个HTMLImageElement | null

getSizes(){
   // unless loading error
   const {naturalHeight, naturalWidth} = this.$refs.imageShow.image;
   console.log(naturalHeight, naturalWidth);
}

或者，您可以根据需要扩展此组件：

让vuetifyOptions； Vuetify.install{ 使用选项{ vuetifyOptions:{…选项} } } const VImg=vuetifyOptions.components.VImg； 导出默认值{ 扩展：VImg， 资料{ 返回{ 自然高度：空， 自然宽度：空 } } 装载{ this.naturalHeight=this.image.naturalHeight this.naturalWidth=this.image.naturalWidth 此.$emit'naturals'，此.image this.$emit'load'，this.src } } Vuetify的v-img组件呈现HTML元素，而不是naturalHeight和naturalWidth仅对HTML元素起作用。我检查了v-img，但它似乎没有配置html标记的属性

Vuetify的v-img组件呈现HTML元素，而不是naturalHeight和naturalWidth仅对HTML元素起作用。我检查了v-img，但它似乎没有配置html标记的属性

---

v-img与html5 img不同。它是一个可能包含img标记的vue组件。它可能没有在v-img组件中定义这些变量。看起来自然宽度是在组件的数据对象中定义的，但高度不是。它在函数中是动态拉入的，但不会返回到函数范围之外的任何内容。如果您需要它，那么最好在不使用v-img组件的情况下单独拉动它。v-img与html5 img不同。它是一个可能包含img标记的vue组件。它可能没有在v-img组件中定义这些变量。看起来自然宽度是在组件的数据对象中定义的，但高度不是。它在函数中是动态拉入的，但不会返回到函数范围之外的任何内容。如果您需要它，那么最好在不使用v-img组件的情况下单独拉动它。