Simple Javascript Image Viewer Component for Vue 2


Vue imageview is a basic image viewer component that enlarges/displays your images in a responsive full-screen popup.

image viewer jquery, simple javascript image viewer, 360 degree image viewer javascript, javascript image viewer zoom pan, image viewer in html javascript

How to make use of it:

Install & Download:

$ npm install vue-imageview


    <div id="imgBox">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
      <img src="" alt="">
    <ImagesView :visible.sync="show" :images="srcArr" :src="imgSrc" />
import ImagesView from 'vue-imageview'
export default {
  components: {
  data() {
    return {
      show: false,
      imgSrc: '',
      srcArr: [],
      info: {}
  methods: {
    async getData(imgBox) {
      const imgs = imgBox.querySelectorAll('img');
      this.srcArr = Array.from(imgs).map((el) => el.src);
  mounted () {
    const imgBox = document.querySelector('#imgBox');
    imgBox.addEventListener('click', (e) => {
      if( == 'IMG') {
        this.imgSrc =; = true

Basic Image Viewer, vue-imageview Plugin/Github

See Demo And Download

Official Website(naihe138): Click Here

This superior jQuery/javascript plugin is developed by naihe138. For extra Advanced Usages, please go to the official website.