29 lines
753 B
TypeScript
29 lines
753 B
TypeScript
import { minidenticon } from 'minidenticons';
|
|
import { ImgHTMLAttributes, useState } from 'react';
|
|
|
|
export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
|
|
const [isError, setIsError] = useState(false);
|
|
|
|
if (isError || !src) {
|
|
const svgURI =
|
|
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50));
|
|
return (
|
|
<img src={svgURI} alt={props.alt} {...props} style={{ backgroundColor: '#000' }} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<img
|
|
{...props}
|
|
src={src}
|
|
onError={({ currentTarget }) => {
|
|
currentTarget.onerror = null;
|
|
setIsError(true);
|
|
}}
|
|
decoding="async"
|
|
alt="lume default img"
|
|
style={{ contentVisibility: 'auto' }}
|
|
/>
|
|
);
|
|
}
|