图片预览插件viewer.js

npm install viewerjs

<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>

import Viewer from 'viewerjs/dist/viewer.min.js';

  open(url: string | Array<string>, index?: number) {
    let image;
    if (typeof url === 'string') {
      image = new Image();
      image.src = url;
    } else if (url instanceof Array) {
      image = document.createElement('ul');
      url.forEach(src => {
        const li = document.createElement('li');
        image.appendChild(li);
        const img = new Image();
        img.src = src; // src是小图的url
        img['data-original'] = src; // data-original是大图的url
        li.appendChild(img);
      });
    } 
    const viewer = new Viewer(image, {
      hidden: function () { viewer.destroy(); }, //    摧毁容器，不摧毁会有些小bug
      url: 'data-original',
    });
    viewer.show();
    if (!Util.isUndefinedOrNull(index)) {
      viewer.view(index); // 显示数组中指定下标的图片
    }
  }