How does vue get the height of the loaded picture?

<div class="file-wrapper">
    <img class="file-position" src="1.jpg" alt="" ref="imgSize" @onload="imgload">
</div>
mounted(){
    this.fileUrl = this.$route.query.file || ""
    //
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(clientHeight);
    this.imgload();
},
        
methods:{
    imgload(){
        let imgSize = this.$refs["imgSize"].offsetHeight;
        console.log(imgSize);
    }
}

how do I get the height of the loaded picture (the width and height of the picture is unknown) the value obtained by imgSize is different from the real one?

Vue.js javascript
Apr.07,2022

get the height of the picture after the page has been rendered 

mounted(){
    this.$nextTick(() => {
        this.imgload();
    })
}

modify
although the dom above has been loaded, the request for image resources may not have been returned 

mounted(){
    doucment.querySelector('flie-position').addEventListener('load', function () {
        this.imgload();
    })
}

I used js to modify the style to implement it. Thank you

Previous: There is obviously a document corresponding to ID in Mongoodb, but you can't find it.

Next: v-bind:src failed to render successfully

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu