diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index a35f4a5fcc..530c2c4e7e 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -6,6 +6,7 @@ import Dirent from '../../models/dirent';
 import DetailListView from './detail-list-view';
 import FileTag from '../../models/file-tag';
 import '../../css/dirent-detail.css';
+import { siteRoot } from '../../utils/constants';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -119,8 +120,7 @@ class DirentDetail extends React.Component {
     let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
     const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
     if (isImg) {
-      bigIconUrl = '/' + dirent.encoded_thumbnail_src;
-      smallIconUrl = '/' + dirent.encoded_thumbnail_src;
+      bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
     }
     let direntName = dirent ? dirent.name : folderDirent.name;
 
@@ -135,7 +135,7 @@ class DirentDetail extends React.Component {
         </div>
         <div className="detail-body dirent-info">
           <div className="img">
-            <img src={bigIconUrl} width="96" alt="" />
+            <img src={bigIconUrl} className="thumbnail" alt="" />
           </div>
           {this.state.direntDetail && 
             <div className="dirent-table-container">
diff --git a/frontend/src/css/dirent-detail.css b/frontend/src/css/dirent-detail.css
index 61d836f2b6..101fb5f30f 100644
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -59,6 +59,12 @@
   align-items: center;
 }
 
+.dirent-info .img .thumbnail {
+  max-width: calc(100% - 4px);
+  max-height: 100%;
+  display: inline-block;
+}
+
 .dirent-table-container {
   padding: 10px 20px;
   display: flex;