How to get the naturalSize of Vuetify v-img?

Question

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.

v-img is not the same as html5 img. its a vue component that likely contains the img tag. it probably doesn't have those variables defined in the v-img component. — Goofballtech, Jun 13 '20 at 05:52
it looks like naturalWidth is defined in the component'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 component at all. https://stackoverflow.com/a/626505/8551436 — Goofballtech, Jun 13 '20 at 06:08

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

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 component for your needs:

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

const VImg = vuetifyOptions.components.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)
  }
}

score 3 · Accepted Answer · answered Jun 13 '20 at 06:13

Vuetify's v-img component 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

Steven Spungin · Answer 3 · 2022-04-13T12:31:47.123

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 component.

I needed to extract this in a pinch, so I did the following. I'm not recommending 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__.computedAspectRatio

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

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

Finally, make sure you wait for the loaded event.

How to get the naturalSize of Vuetify v-img?

3 Answers3

It is not a HTMLImageElement.