Try to use the old html.

package.json

@@ -6,6 +6,7 @@
     "@ant-design/icons": "^4.2.1",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/photoswipe": "^4.1.0",
     "antd": "^4.3.1",
     "axios": "^0.19.2",
     "camelcase": "^5.3.1",
@@ -13,6 +14,7 @@
     "dotenv-expand": "5.1.0",
     "fs-extra": "^8.1.0",
     "identity-obj-proxy": "3.0.0",
+    "photoswipe": "^4.1.3",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",

src/assets/css/global/miscellaneous.less

@@ -24,7 +24,6 @@
 }
 
 
-
 //超出三行使用点点点
 .list-text-restriction {
   display: -webkit-box;
@@ -110,3 +109,16 @@ a {
   transition: color 0.3s;
   text-decoration-skip: objects;
 }
+
+
+//头像
+.avatar-large {
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+}
+.avatar-middle {
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+}

src/pages/user/Detail.less

@@ -1,4 +1,4 @@
-.page-profile {
+.page-user-detail {
 
   background-color: white;
 

src/pages/user/Detail.tsx

@@ -42,7 +42,7 @@ export default class Detail extends TankComponent <IProps, IState> {
 
     return (
 
-      <div className="page-profile">
+      <div className="page-user-detail">
 
         <TankTitle name={'个人资料'}>
           <Button type="primary" onClick={this.changePassword.bind(this)}>

src/pages/user/List.tsx

@@ -17,6 +17,7 @@ import {Avatar, Button, Tag} from "antd";
 import {PlusOutlined} from '@ant-design/icons';
 import {UserRoleMap} from "../../common/model/user/UserRole";
 import {UserStatusMap} from "../../common/model/user/UserStatus";
+import ImagePreviewer from "../widget/previewer/ImagePreviewer";
 
 
 interface IProps extends RouteComponentProps {
@@ -96,7 +97,11 @@ export default class List extends TankComponent<IProps, IState> {
       title: '头像',
       dataIndex: 'avatarUrl',
       render: (text: any, record: User, index: number): React.ReactNode => (
-        <Avatar size="large" src={record.getAvatarUrl()}/>
+        <img alt="avatar" className='avatar-middle cursor' src={record.getAvatarUrl()} onClick={() => {
+
+          ImagePreviewer.showSinglePhoto(record.getAvatarUrl(), 200, 200)
+
+        }}/>
       ),
     }, {
       title: '用户名',

src/pages/widget/previewer/ImagePreviewer.less

@@ -0,0 +1,3 @@
+.widget-image-previewer {
+
+}

src/pages/widget/previewer/ImagePreviewer.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import "./ImagePreviewer.less"
+import TankComponent from "../../../common/component/TankComponent";
+import PhotoSwipe from 'photoswipe'
+import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
+//PhotoSwipe的样式
+import "photoswipe/dist/photoswipe.css";
+import "photoswipe/dist/default-skin/default-skin.css";
+
+interface IProps {
+}
+
+interface IState {
+}
+
+export default class ImagePreviewer extends TankComponent<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {};
+  }
+
+  static pswpDom(): HTMLElement {
+    let innerHTML = `
+    <!-- Background of PhotoSwipe.
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides.
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                <button class="pswp__button pswp__button--share" title="Share"></button>
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div>
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+    `
+
+    let div: HTMLElement = document.createElement('div');
+    div.className = "pswp";
+    div.setAttribute("tabIndex", "-1")
+    div.setAttribute("role", "dialog")
+    div.setAttribute("aria-hidden", "true")
+
+    div.innerHTML = innerHTML
+
+    return div
+  }
+
+  //展示一张图片
+  static showSinglePhoto(url: string, width: number = 0, height: number = 0) {
+
+    let that = this;
+    let items = [{
+      src: url,
+      w: width,
+      h: height
+    }];
+
+    let options = {
+      //不需要历史纪录
+      history: false,
+      //不需要全屏按钮
+      fullscreenEl: false,
+      //不需要分享按钮
+      shareEl: false,
+      //点击不要让控制按钮消失
+      tapToToggleControls: false,
+      //当前从第0张展示。
+      index: 0
+    };
+
+    //获取dom节点
+    let div = ImagePreviewer.pswpDom()
+    //添加到body
+    document.body.appendChild(div);
+
+    console.log("路径", url, items)
+
+    let photoSwipe = new PhotoSwipe(div, PhotoSwipeUIDefault, items, options);
+
+    photoSwipe.listen('gettingData', function (index, item) {
+
+      console.log("在gettingData", index, item)
+      if (!item.w || !item.h || item.w < 1 || item.h < 1) {
+
+        const img: HTMLImageElement = new Image()
+
+        img.onload = function () {
+          console.log("图片加载好了", img.width, img.height)
+
+          item.w = width
+          item.h = height
+
+          photoSwipe.updateSize(true); // reinit Items
+        }
+        img.src = item.src!
+      }
+    })
+    photoSwipe.init();
+
+    photoSwipe.listen('close', () => {
+      console.log("photoSwipe close")
+      if (div.parentNode) {
+        //移除节点
+        div.parentNode.removeChild(div);
+      }
+    })
+    photoSwipe.listen('afterChange', () => {
+      console.log("photoSwipe afterChange")
+
+    })
+
+
+  }
+
+
+  render() {
+
+    let that = this
+
+    return (
+      <div className="widget-image-previewer">
+
+      </div>
+    );
+  }
+}
+