Add support image lazyloading

This commit is contained in:
DefectingCat
2022-08-03 16:20:09 +08:00
parent b0e4dc8527
commit 005180fb99
12 changed files with 545 additions and 201 deletions

View File

@ -3,10 +3,15 @@ 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="blur" {...rest} />
<NextImage alt={alt} placeholder={placeholder} {...rest} />
{alt && <span className="block text-center text-gray-400">{alt}</span>}
</span>
</>