viewerjs -v 11 动态获取图片（ajax）,以及重复初始化问题。

// 引入Viewer.js库
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
 
// 初始化Viewer实例
let viewer = null;
 
// 动态获取图片并使用Viewer.js展示
function showImagesWithViewer(imageUrls) {
  // 如果viewer实例已存在，则销毁它
  if (viewer) {
    viewer.destroy();
  }
 
  // 使用Viewer.js创建图片展示
  const container = document.getElementById('image-container');
  container.innerHTML = imageUrls.map(url => `<img src="${url}" alt="图片"/>`).join('');
  viewer = new Viewer(container, {
    // Viewer.js的初始化选项
    // 例如：toolbar: true, url: 'data-original'
  });
 
  // 打开Viewer展示第一张图片
  viewer.view(container.getElementsByTagName('img')[0]);
}
 
// 假设这是通过Ajax异步获取的图片URL列表
const imageUrls = [
  'http://example.com/image1.jpg',
  'http://example.com/image2.jpg'
  // ...更多图片URL
];
 
// 调用函数展示图片
showImagesWithViewer(imageUrls);

这段代码演示了如何使用Viewer.js动态获取图片并展示。首先，我们引入了Viewer.js库及其样式。然后定义了一个函数showImagesWithViewer，该函数接受一个图片URL数组作为参数，并在DOM中动态创建这些图片。如果Viewer实例已存在，它会先被销毁，然后创建新的图片元素并初始化Viewer实例。最后，我们调用这个函数展示图片。