Vue.js:获取图像的 src 并将其传递给另一个调用

Question

正如我试图在标题中解释的那样：我目前正在尝试进入 Vue.js总的来说，到目前为止，我尝试过的所有内容都有效。

现在我想包括exif.js读取我上传到我的应用程序的图像的exif数据。 我也使用Laravel，我认为在这种情况下这无关紧要。

这是我的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(( 调用：

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

到目前为止.js这是我在我的应用程序中编写的内容：

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);
    });
},

正如我在代码中提到的，我认为我的问题是我没有正确引用我的图像，但我对 Vue 很陌生，而且我对语法不够了解，无法自己纠正这个问题。

我也不知道这是否是正确的方法，这只是我能想到的一种方法。

GitHub 回购：https://github.com/annazeller/mediadb

谢谢:)

Answer 1

您正在正确访问img元素的src。

根据 exif-js 的自述文件，您需要将实际的 img 元素作为第一个参数传递给 getData 方法，而不是src：

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