How to pass an image src into a modal dialog in Vue (in order to zoom the clicked image)?
Solution 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>
Solution 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
}
}
Un1
Updated on June 17, 2022Comments
-
Un1 almost 2 years
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?