Merge pull request #38 from IDEA-Research/feature/dataset_cover

Feature: optimize dataset cover image display logic
IDEA-Research · Jun 16, 2023 · 258f1c3 · 258f1c3
2 parents ba89a24 + 41641f2
commit 258f1c3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/packages/app/src/components/DatasetItem/index.tsx b/packages/app/src/components/DatasetItem/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Card, List, Tooltip } from 'antd';
+import { Card, List, Tooltip, Image } from 'antd';
 import Icon from '@ant-design/icons';
 import { ReactComponent as DownloadIcon } from '@/assets/svg/download.svg';
 import { DATA } from '@/services/type';
 import { useLocale } from '@/locales/helper';
 import { ANNOTATION_TYPE_ICONS } from '@/constants';
-import { renderDatasetCover } from '@/utils/datasets';
+import { generateDefaultCover } from '@/utils/datasets';
 import styles from './index.less';
 
 export interface IProps {
@@ -33,9 +33,13 @@ const DatasetItem: React.FC<IProps> = (props) => {
       >
         <div className={styles.imgBox}>
           <div className={styles.imgWrap}>
-            <img
-              src={renderDatasetCover(data?.coverUrl, data?.objectTypes)}
+            <Image
+              src={data?.coverUrl}
               alt="cover"
+              onError={(e: any) => {
+                e.target.src = generateDefaultCover(data?.objectTypes);
+              }}
+              preview={false}
             />
           </div>
           <div className={styles.types}>

diff --git a/packages/app/src/utils/datasets.ts b/packages/app/src/utils/datasets.ts
@@ -1,35 +1,27 @@
-import { isEmpty, isUndefined, includes } from 'lodash';
+import { includes } from 'lodash';
 
 /**
- * check cover url of dataset, and display cover image based on different situation
- * @param url
+ * set cover image based on dataset type
  * @param type
- * @returns modified url
  */
-export const renderDatasetCover = (url: string, type: string[]) => {
-  if (isUndefined(url) || isEmpty(url)) {
-    let _img_index = 5;
+export const generateDefaultCover = (type: string[]) => {
+  let _img_index: number = 5;
 
-    if (includes(type, 'Classification')) {
-      _img_index = 1;
-    }
-    if (includes(type, 'Detection')) {
-      _img_index = 2;
-    }
-    if (includes(type, 'Segmentation')) {
-      _img_index = 3;
-    }
-    if (includes(type, 'Matting')) {
-      _img_index = 4;
-    }
-    if (includes(type, 'KeyPoints')) {
-      _img_index = 5;
-    }
-
-    return require(`@/assets/images/cards/card_cover_${_img_index}.png`);
-  } else if (/^http:/.test(url)) {
-    return url;
-  } else {
-    return process.env.API_PATH + url;
+  if (includes(type, 'Classification')) {
+    _img_index = 1;
+  }
+  if (includes(type, 'Detection')) {
+    _img_index = 2;
+  }
+  if (includes(type, 'Segmentation')) {
+    _img_index = 3;
   }
+  if (includes(type, 'Matting')) {
+    _img_index = 4;
+  }
+  if (includes(type, 'KeyPoints')) {
+    _img_index = 5;
+  }
+
+  return require(`@/assets/images/cards/card_cover_${_img_index}.png`);
 };