So I need to get the sizes of an image shown in my page using Vuetify v-img. I tried to get the size with naturalHeight and naturalWidth by doing so:

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

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

but it didn't show me the size, it returns undefined.

So I need to get the sizes of an image shown in my page using Vuetify v-img. I tried to get the size with naturalHeight and naturalWidth by doing so:

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

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

but it didn't show me the size, it returns undefined.

• javascript
• vue.js
• vuetify.js

• v-img is not the same as html5 img. its a vue ponent that likely contains the img tag. it probably doesn't have those variables defined in the v-img ponent. – Goofballtech Commented Jun 13, 2020 at 5:52
• it looks like naturalWidth is defined in the ponent's data object but height is not. It's pull dynamically in functions but not returned to anything outside of the function scope. Perhaps if you need it then it would be better to pull it separately without the use of the v-img ponent at all. stackoverflow./a/626505/8551436 – Goofballtech Commented Jun 13, 2020 at 6:08

3 Answers 3

Vuetify's v-img ponent renders <div> HTML elements instead of <img> and naturalHeight and naturalWidth work only on <img> HTML elements. I checked Vuetify's documentation for v-img and it doesn't seem to have a property to configure the html tag.

HTMLImageElement.naturalHeight reference

VImg renders on a VResponsive, and puts the image in a div as backgroundimage.

It is not a HTMLImageElement.

But maybe you can abuse an integrated onLoad event and access its vm.image, which is a HTMLImageElement | null.

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

Or you can extend this ponent for your needs:

let vuetifyOptions;
Vuetify.install({
  use(_, options){
     vuetifyOptions: {...options}
  }
})

const VImg = vuetifyOptions.ponents.VImg;


export default {
  extends: VImg,
  data(){
    return {
      naturalHeight: null,
      naturalWidth: null
    }
  }
  onLoad(){
    this.naturalHeight = this.image.naturalHeight
    this.naturalWidth = this.image.naturalWidth
    this.$emit('naturals', this.image)
    this.$emit('load', this.src)
  }
}

If you look under the hood, you find Vuetify uses the background image of a DIV element, and not an IMG element. If you then take apart the engine, you find the natural width and aspect ratio stashed in the Vue ponent.

I needed to extract this in a pinch, so I did the following. I'm not remending this non-API hack, but "it is what it is".

I was not able to access the Component from my code, so needed to grab the dimensions from the element proper.

const naturalWidth = divElement.__vue__.naturalWidth
const naturalHeight = naturalWidth / divElement.__vue__.putedAspectRatio

You can also check your element is a v-img, and get the html image element from the ponent

if (divElement.classList.contains('v-image')) {
  const img = divElement.__vue__?.image as HTMLImageElement
  if (img?.plete) {
    process(img.naturalWidth, img.naturalHeight)
  }
}

Finally, make sure you wait for the loaded event.