安装:

yarn add viewerjs

//创建image.js

//引入:
import 'viewerjs/dist/viewer.js'
import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs/dist/viewer.esm'; //加上这行，不然一直报Viewer is not defined,参考:https://github.com/fengyuanchen/viewerjs/issues/136

//使用：
$(function () {

    /*
    img viewer
    * */
    const viewer = new Viewer(document.getElementById('certificationImages'), {
        url:'data-original', //这个参数挺重要的，如果不设置的话 默认就是 src的值；但是这个插件实现的一个条件是，img 上会有两个图片地址，一个用来展示原图，一个用来缩放，所以二者不能是同一张图，不然当缩放的图片关闭的时候，原图也会被关闭，就是这个小问题 搞得我莫名其妙.
        toolbar: false,
        navbar:false
    });
});

页面:

<tbody id="certificationImages">
{% for course in pagination %}
    <tr class="row_list center-content">
        <td>{{ course.id }}</td>
        <td>
            <img data-original="{{ asset(course.certificationUrl)}}" src="{{ asset(course.certificationUrl)|imagine_filter('squared_thumbnail_small') }}" style="display: inline-block;width: 50px; height: 33px; cursor: pointer;" alt="">
        </td>
    </tr>
{% endfor %}
</tbody>