Vue.Js show image in popup : In vue.js, we can display an image by using overlay and placing image inside. The shorthand src=”” can also be used to display images in vuejs. In this article, we’ll show you how to pop up a toggle image in vuejs modal popup. To modify and execute the code online, you can also use our online editor.
Vue.Js show image in popup | Full Image Example
An image can be displayed in dialog simply as below.
VueJs display image in dialog Example
<div id="app">
<button @click="toggleDialog()" >Show Popup Image</button>
<p></p>
<div class="dialog" v-if="dialog">
<div class="dialog-content">
<button @click="toggleDialog()" class="close-icon" >x</button>
<img :src="imageSrc">
</div>
</div>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
imageSrc: "https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG",
dialog: false,
}
},
methods:{
toggleDialog(){
this.dialog = !this.dialog;
}
}
}).mount('#app')
</script>
<style>
.dialog {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
margin: 0 auto;
height: 100%;
background: rgba(0,0,0,0.5);
border: 1px solid #999;
}
.dialog-content {
width: 400px;
height: auto;
margin: 0 auto;
padding: 10px;
margin-top: 20px;
}
.dialog-content img {
width: 100%;
height: auto;
}
.close-icon {
float: right;
}
</style>
Output of the above code will be as below –
