Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

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

Browse source
This commit is contained in:
Xiao Yijun 2023-06-06 16:22:54 +08:00 • committed by GitHub
parent c5770107a0
commit 92f6f9f371
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/components/Uploader/ImageUploader/index.module.scss
View file

@ -16,7 +16,7 @@
bottom: _.unit(2);
}
> img {
.image {
height: 40px;
max-width: 100%;
object-fit: contain;

13
packages/console/src/components/Uploader/ImageUploader/index.tsx
View file

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