Vue.js: Get src of an Image and pass it to another call

as I tried to explain in my headline: I'm currently trying to get into Vue.js and overall everything I've tried worked up to this point.

Now I want to include exif.js to read the exif-data of an image I uploaded to my App. Im also using Laravel, which I think shouldn't matter in this situation.

Here's my code from my modal.blade.php:

<div class="modal-body">
    <img class="img-fluid" ref="imageExif" v-if="Object.keys(file).length !== 0" src=""  :src="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + file.type + '/' + file.name + '.' + file.extension" :alt="file.name">
    <button class="btn btn-primary" @click="modalExif()">Show exif-data</button>
</div>

showModal() call:

<div class="file-header-wrapper" v-if="file.type == 'image'" @click="showModal(file)">
    <img v-if="file === editingFile" src=""  :src="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + savedFile.type + '/' + savedFile.name + '.' + savedFile.extension" :alt="file.name">
    <img v-if="file !== editingFile" src=""  :src="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + file.type + '/' + file.name + '.' + file.extension" :alt="file.name">
</div>

And here is what I've written in my app.js so far:

showModal(file) {
    this.file = file;
    this.modalActive = true;
},

modalExif() {
    console.log('Button clicked');
    this.imageExif = this.$refs.imageExif.src;  //I THINK THIS LINE IS MY PROBLEM
    EXIF.getData(this.imageExif, function() {
        console.log('image info', this);
        console.log('exif data', this.exifdata);
    });
},

As I mentioned in my Code, I think my problem is that I don't refer to my image correctly, but I'm pretty new to Vue and I don't know the syntax well enough to correct this by myself.

I also don't know if this is the correct way of doing it, It's just one way I could think of.

GitHub Repo: https://github.com/annazeller/mediadb

Thank you :)

You are accessing the img element's src correctly.

Based on the README for exif-js, you need to pass the actual img element as the first parameter to the getData method, not the src:

this.imageExif = this.$refs.imageExif;
EXIF.getData(this.imageExif, function() {
    console.log('image info', this);
    console.log('exif data', this.exifdata);
});