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

【问题标题】：Vue.js: Get src of an Image and pass it to another callVue.js：获取图像的 src 并将其传递给另一个调用
【发布时间】：2019-06-30 22:33:04
【问题描述】：

正如我试图在我的标题中解释的那样：我目前正在尝试进入 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

谢谢你:)

【问题讨论】：

当您在 img 标签中省略 src="" 时会发生什么？
据我所知，什么都没有 :( 我的 console.log 工作正常，exif 调用不工作。
你能告诉我们你在哪里触发显示模式
如果您将console.log(this.$refs.imageExif.src) 放在您认为有问题的行之前，它会输出什么？
@MichaelMano 在帖子中添加了它。

标签： javascript laravel vue.js exif-js

【解决方案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);
});

【讨论】：