How to pass an image src into a modal dialog in Vue (in order to zoom the clicked image)?

Question

What I'm trying to do is to zoom an image on click, the idea is:

• you click on an image
• dialog of width=85vw opens up with the image you just clicked on inside of it (so the image is displayed almost fullscreen now)

I cannot think of a better way of "zooming" an image on click, but to open it in a modal dialog (if there's an easier way, please let me know).

Code:

 <v-dialog v-model="dialog" max-width="85vw" >
     <img :src="img1" alt="" width="100%" @click.stop="dialog=false">
 </v-dialog>
                
 <img :src="img1" width="500px"  @click.stop="dialog = true">
 <img :src="img2" width="500px"  @click.stop="dialog = true">
 <img :src="img3" width="500px"  @click.stop="dialog = true">

 export default {
     data() {
         img1: "../../src/assets/pexels-photo-373912.jpg",
         img2: "../../src/assets/pexels-photo-373912.jpg",
         img3: "../../src/assets/pexels-photo-373912.jpg"
     }
 }

The problem is, it's not opening any clicked image in a dialog, just the one you hard coded in there, in this example it will always open img1 no matter what image you click.

I don't know how to pass the :src into the dialog dynamically - the :src of the image you clicked.

P.S. v-dialog is a component from Vuetify.js library

---

Question:

• Is there an obviously better way of doing it?
• If not really, how do I make this method to work and display the image I clicked in the modal dialog?

Answer 1

You need a variable to hold which image is selected. When you click on an image, it should set the variable to the url for that image. When you click on the dialog image, it should unset the variable.

The dialog should show when the variable is set and otherwise be hidden.

For simplicity, I'm not using an actual dialog, just a div. It looks like you would use it for the dialog's v-model rather than using the v-if I use.

new Vue({
  el: '#app',
  data: {
    selectedImage: null,
    images: [
      'http://via.placeholder.com/400x300?text=image%201',
      'http://via.placeholder.com/600x400?text=image%202',
      'http://via.placeholder.com/500x500?text=image%203'
    ]
  },
  methods: {
    zoom(url) {
      console.log("Zoom", url);
      this.selectedImage = url;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-if="selectedImage" max-width="85vw">
    <img :src="selectedImage" alt="" width="100%" @click.stop="selectedImage = null">
    <hr>
  </div>

  <div v-for="url in images">
    <img :src="url" width="100px" @click="zoom(url)">
  </div>
</div>

Answer 2

to click distributed images across the page define a property and change it with click event

in template

 <v-dialog v-model="dialog" max-width="60%" @keydown.esc="cancel">
      <v-card>
        <v-img :src="pic" alt="" contain/>
      </v-card>
    </v-dialog>
  <v-img
      src="require(@/assets/clinic/1.jpeg)"
      alt=""
      contain
      @click="openPic(require('@/assets/clinic/1.jpeg'))"//this part is important you have to require image
   />

in script

data() {
    return {
      pic: "",
      dialog: false
    }
  },
  methods: {
    openPic(image) {
      this.dialog = true
      this.pic = image
    },
    cancel() {
      this.dialog = false
    }
  }