Getting width of an image fails on first load in VUE3

[isoquante]

Hello community,

on the first load of a page i am getting the width of an image.
That width is on the first load 0.
It gets refetched, when the website gets resized. In this case, the width is correctly fetched like e.g. 625px.

At first it was collected like this:
onMounted(() => {document.querySelector('#test img').getBoundingClientRect().width})

Then i tried using Vue's ref() function:
(I hoped it would solve my issue)

Template:
<img id="test" src="/storage/assets/mockup.webp" alt="frame" ref="picture">

JS:
const picture = ref(null)

Test:
onMounted(() => {
console.log(picture.value.getBoundingClientRect())
console.log(picture.value.clientWidth)
})

Again the width value was 0 on the first load. When i triggered my resize function it fetched the width correctly.

My guess is, that the template is rendered and the js code is triggered before the actual image has reached the client side.
I did not find a proper workaround for this.

How do i get the width correctly on the first load?

[Shyam-Chen]

Try nextTick():

import { nextTick, onMounted } from 'vue';

onMounted(() => {
  nextTick(() => {
    console.log(picture.value.getBoundingClientRect());
    console.log(picture.value.clientWidth);
  });
});

[isoquante]

Thank you for your help.
Unfortunately this isn't working for me.

In the meantime i tried a small timeout:

Vue Template part

<template>
  <img id="bezel" src="/storage/assets/mockup.webp" alt="frame" ref="picture">
</template>

JS in Vue

import {nextTick, onMounted, ref} from "vue";

const picture = ref(null)

onMounted(() => {
    setTimeout(init, 100);

    function init() {
                console.log(picture.value.getBoundingClientRect())
                console.log(picture.value.clientWidth)
    }
})

The timeout works fine but doesn't look like a clean solution for me.
Are there other and cleaner solutions i can try?

[Justineo]

You need to wait for the load event on your image element.

[isoquante]

Thank you, that worked for me!

    let img = document.querySelector('#test');
    img.onload = function(){
        initSlider();
    };