0

as I tried to explain in my headline: I'm currently trying to get into Vue.js and overall everything I've tried worked up to this point.

Now I want to include exif.js to read the exif-data of an image I uploaded to my App. Im also using Laravel, which I think shouldn't matter in this situation.

Here's my code from my 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>

And here is what I've written in my app.js so far:

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

As I mentioned in my Code, I think my problem is that I don't refer to my image correctly, but I'm pretty new to Vue and I don't know the syntax well enough to correct this by myself.

I also don't know if this is the correct way of doing it, It's just one way I could think of.

GitHub Repo: https://github.com/annazeller/mediadb

Thank you :)

thanksd
  • 54,176
  • 22
  • 157
  • 150
Brecherchef
  • 401
  • 6
  • 22
  • What happens when you omit `src=""` from your img tag? – jonnycraze Feb 06 '19 at 21:20
  • As far as I can tell, nothing :( My console.log is working, the exif call isn't. – Brecherchef Feb 06 '19 at 21:24
  • Can you show us where you trigger show modal – Michael Mano Feb 06 '19 at 21:26
  • what does `console.log(this.$refs.imageExif.src)` output if you put that right before the line you think is the problem? – thanksd Feb 06 '19 at 21:28
  • @MichaelMano added it inside the post. – Brecherchef Feb 06 '19 at 21:29
  • @thanksd wait it actually does find my image :o It's returning `http://192.168.10.10/storage/Chef_1/image/ExifTest.jpg` as it should be, maybe the error isn't actually in the line I thought.. – Brecherchef Feb 06 '19 at 21:32
  • @DanielBeck Ye they're Vue methods – Brecherchef Feb 06 '19 at 21:33
  • Sorry, I somehow leapt to the conclusion that you were looping over multiple `file` objects, disregard my comments and (now-deleted) answer – Daniel Beck Feb 06 '19 at 21:34
  • Okay well now I'm even more confused than before. I thought my error was that my exif doesn't fine a file to use but it actually does so now I don't know what I have to do to get this to work.. – Brecherchef Feb 06 '19 at 21:39
  • What exactly isn't working as expected? Are you getting any errors? – thanksd Feb 06 '19 at 21:39
  • @thanksd When I previously used the EXIF function on my fileuploaded it worked just fine. All I had to do was add the function inside the method. Now im trying to to the same inside the other function and somehow it doesn't work as it did before. No errors displayed, just no console entry about my exif-data of the image. – Brecherchef Feb 06 '19 at 21:42
  • I just added my GitHub repo, maybe I forgot to show you guys some important code that stops ths from working. JS-file is inside `ressources » assets » js » app.js` – Brecherchef Feb 06 '19 at 21:46
  • In the [readme for exif-js](https://github.com/exif-js/exif-js#usage), it looks like you need to pass the `img` element as the first parameter to the `getData` method, not the `src`. Have you tried that? – thanksd Feb 06 '19 at 21:57
  • Ahh that did it! Thank you so much! – Brecherchef Feb 06 '19 at 21:58

1 Answers1

1

You are accessing the img element's src correctly.

Based on the README for exif-js, you need to pass the actual img element as the first parameter to the getData method, not the src:

this.imageExif = this.$refs.imageExif;
EXIF.getData(this.imageExif, function() {
    console.log('image info', this);
    console.log('exif data', this.exifdata);
});
thanksd
  • 54,176
  • 22
  • 157
  • 150