fix: encode some character error with encodeURI (#862) (#868)

* fix: encode some character error * test: add image holder test Co-authored-by: 随风 <daskyrk@users.noreply.github.com>
erda-project · Aug 5, 2021 · 9c796ed · 9c796ed
1 parent 1921434
commit 9c796ed
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/shell/app/common/__tests__/components/img-holder.test.tsx b/shell/app/common/__tests__/components/img-holder.test.tsx
@@ -35,4 +35,10 @@ describe('ImgHolder', () => {
       `holder.js/40x40?${encodeURI('size=12&text=D&theme=avatar&font=PingFang SC&fontweight=normal')}`,
     );
   });
+  it('render with part of emoji character', () => {
+    const wrapper = mount(<ImgHolder rect="40x40" type="avatar" text={'🍅'.substring(0, 1)} />);
+    expect(wrapper.find('img').prop('data-src')).toBe(
+      `holder.js/40x40?${encodeURI('size=12&text=n&theme=avatar&font=PingFang20%SC&fontweight=normal')}`,
+    );
+  });
 });
diff --git a/shell/app/common/components/img-holder.tsx b/shell/app/common/components/img-holder.tsx
@@ -90,11 +90,22 @@ export const ImgHolder = (props: IProps) => {
         theme = 'avatar';
       }
     }
-    const holderParams = encodeURI(
-      compact(
-        map({ random, size, text, theme, fg, bg, font, fontweight }, (v, k) => (v === undefined ? v : `${k}=${v}`)),
-      ).join('&'),
-    );
+    let holderParams = '';
+    try {
+      holderParams = encodeURI(
+        compact(
+          map({ random, size, text, theme, fg, bg, font, fontweight }, (v, k) => (v === undefined ? v : `${k}=${v}`)),
+        ).join('&'),
+      );
+    } catch (error) {
+      holderParams = encodeURI(
+        compact(
+          map({ random, size, text: 'n', theme, fg, bg, font, fontweight }, (v, k) =>
+            v === undefined ? v : `${k}=${v}`,
+          ),
+        ).join('&'),
+      );
+    }
     return (
       <img
         alt="holder"