Files
DefectingCat.github.io/components/mdx/Image.tsx
2022-08-03 16:20:09 +08:00

22 lines
559 B
TypeScript

import NextImage, { ImageProps } from 'next/image';
interface Props extends ImageProps {}
const Image = ({ alt, ...rest }: Props) => {
const supportImg = ['jpeg', 'png', 'webp', 'avif'];
const placeholder = supportImg.includes((rest.src as { src: string }).src)
? 'blur'
: 'empty';
return (
<>
<span className="block text-center">
<NextImage alt={alt} placeholder={placeholder} {...rest} />
{alt && <span className="block text-center text-gray-400">{alt}</span>}
</span>
</>
);
};
export default Image;