List View with photo

Questions
1

Hi

I have one List View

LargePhoto
LargePhoto828×478 99.7 KB

I want if the user “click” on the photo, the photo show it more large, how can I do it?

<div class="col" id="jugador-foto"><img src="../img/fotojugador.jpg" width="60"/></div>

2

Add click event in the component

<div class="col" id="jugador-foto">
  <img src="../img/fotojugador.jpg" width="60" @click="openPhoto('../img/fotojugador.jpg')"/>
</div>

Create listener in the methods

methods: {
  openPhoto(src) {
    this.$app.photoBrowser.create({
      photos: [src],
    }).open()
  },
}
3

Hi bryceandy

Thanks for you reply

I’m a little problem

My photo it’s a variable base64, so when I’m try to send the variable I have gotten the “Uncaught SyntaxError: Invalid regular expression flags” message error

Any ideas on how fix it?

NOTE: I don’t copy all variable base64 here on the post because it’s much larger

<div class="col" id="jugador-foto" onclick="showPhoto(/9j/4AAQSkZJRgABAQEAYABgAAD/4TDWRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAExAAIAAAALAAAQVodpAAQAAAABAAAQYoglAAQAAAABAAAgruocAAcAABAMAAAASgAAAAAc6gAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" width="60" class=""></div>

4

You need to use correct format for data urls: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs