pronounsfu/frontend/components/FallbackImage.tsx

34 lines
987 B
TypeScript

import { HTMLAttributes } from "react";
export interface Props extends HTMLAttributes<Props> {
urls: string[];
alt: string;
}
export default function FallbackImage({ urls, alt, className }: Props) {
const fallbackUrl = urls.pop()!;
urls.push(fallbackUrl);
return (
<picture className={className}>
{urls.length !== 0 &&
urls.map((url, key) => {
let contentType: string;
if (url.endsWith(".webp")) {
contentType = "image/webp";
} else if (url.endsWith(".jpg") || url.endsWith(".jpeg")) {
contentType = "image/jpeg";
} else if (url.endsWith(".png")) {
contentType = "image/png";
} else {
contentType = "application/octet-stream";
}
return (
<source width={200} key={key} srcSet={url} type={contentType} />
);
})}
<img width={200} src={fallbackUrl} alt={alt} className={className} />
</picture>
);
}