54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import React, { ImgHTMLAttributes } from 'react';
|
|
|
|
interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
src: string;
|
|
alt: string;
|
|
width?: number;
|
|
height?: number;
|
|
className?: string;
|
|
fallbackSrc?: string;
|
|
objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
|
|
fill?: boolean;
|
|
fullWidth?: boolean;
|
|
fullHeight?: boolean;
|
|
}
|
|
|
|
export function Image({
|
|
src,
|
|
alt,
|
|
width,
|
|
height,
|
|
className = '',
|
|
fallbackSrc,
|
|
objectFit,
|
|
fill,
|
|
fullWidth,
|
|
fullHeight,
|
|
...props
|
|
}: ImageProps) {
|
|
const classes = [
|
|
objectFit ? `object-${objectFit}` : '',
|
|
fill ? 'absolute inset-0 w-full h-full' : '',
|
|
fullWidth ? 'w-full' : '',
|
|
fullHeight ? 'h-full' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
className={classes}
|
|
onError={(e) => {
|
|
if (fallbackSrc) {
|
|
(e.target as HTMLImageElement).src = fallbackSrc;
|
|
}
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|