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

Question

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

现在我想包含 exif.js 以读取我上传到我的应用程序的图像的 exif-data。我也在使用 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>

到目前为止，这是我在 app.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。

基于README for 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);
});

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

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

javascript

laravel

vue.js

exif-js