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>

这是到目前为止我在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并将其传递给另一个调用

1 个答案: