From 92f6f9f37142222e3fbc1b9fea0310ceeb53ac90 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 6 Jun 2023 16:22:54 +0800
Subject: [PATCH] fix(console): fix fallback image in image uploader  (#3984)

---
 .../Uploader/ImageUploader/index.module.scss        |  2 +-
 .../src/components/Uploader/ImageUploader/index.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/components/Uploader/ImageUploader/index.module.scss b/packages/console/src/components/Uploader/ImageUploader/index.module.scss
index a76ebbb13..2a05bbb3b 100644
--- a/packages/console/src/components/Uploader/ImageUploader/index.module.scss
+++ b/packages/console/src/components/Uploader/ImageUploader/index.module.scss
@@ -16,7 +16,7 @@
     bottom: _.unit(2);
   }
 
-  > img {
+  .image {
     height: 40px;
     max-width: 100%;
     object-fit: contain;
diff --git a/packages/console/src/components/Uploader/ImageUploader/index.tsx b/packages/console/src/components/Uploader/ImageUploader/index.tsx
index ed3533d85..1562ee297 100644
--- a/packages/console/src/components/Uploader/ImageUploader/index.tsx
+++ b/packages/console/src/components/Uploader/ImageUploader/index.tsx
@@ -1,6 +1,7 @@
 import type { AllowedUploadMimeType } from '@logto/schemas';
 
 import Delete from '@/assets/images/delete.svg';
+import ImageWithErrorFallback from '@/components/ImageWithErrorFallback';
 
 import IconButton from '../../IconButton';
 import FileUploader from '../FileUploader';
@@ -26,7 +27,17 @@ export type Props = Omit<FileUploaderProps, 'maxSize' | 'allowedMimeTypes'> & {
 function ImageUploader({ name, value, onDelete, ...rest }: Props) {
   return value ? (
     <div className={styles.imageUploader}>
-      <img alt={name} src={value} crossOrigin="anonymous" />
+      <ImageWithErrorFallback
+        className={styles.image}
+        src={value}
+        alt={name}
+        /**
+         * Some social connectors like Google will block the references to its image resource,
+         * without specifying the referrerPolicy attribute. Reference:
+         * https://stackoverflow.com/questions/40570117/http403-forbidden-error-when-trying-to-load-img-src-with-google-profile-pic
+         */
+        referrerPolicy="no-referrer"
+      />
       <IconButton
         className={styles.delete}
         onClick={() => {