Vue.js: получить src изображения и передать его другому вызову - PullRequest
Новая
       29

Vue.js: получить src изображения и передать его другому вызову

0 голосов
/ 07 февраля 2019

, как я пытался объяснить в своем заголовке: в настоящее время я пытаюсь получить доступ к 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 () 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>

И вот что я написал в своем 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

Спасиботы :) 1021 *

1 Ответ

0 голосов
/ 07 февраля 2019

Вы правильно получаете доступ к элементу img src.

На основе README для 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);
});
...