fix(console): fix fallback image in image uploader (#3984)

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;

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={() => {