73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
|
|
interface ImageBlurryProps {
|
|
src: string;
|
|
alt?: string;
|
|
classname?: string;
|
|
key?: string | number;
|
|
style?: React.CSSProperties;
|
|
priority?: boolean;
|
|
}
|
|
|
|
const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
|
|
const { src, alt, classname, key, style, priority = false } = props;
|
|
|
|
const [imgSrc, setImgSrc] = useState<string>(src);
|
|
const [isError, setIsError] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
setImgSrc(src);
|
|
}, [src]);
|
|
|
|
const handleImage = () => {
|
|
const pics = document.querySelectorAll<HTMLImageElement>("img");
|
|
pics.forEach((pic) => {
|
|
if (pic.complete) {
|
|
checkImage(pic);
|
|
} else {
|
|
pic.addEventListener("load", function () {
|
|
checkImage(this);
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const checkImage = (img: HTMLImageElement) => {
|
|
if (img.naturalHeight > img.naturalWidth) {
|
|
img.classList.add("portrait");
|
|
} else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
|
|
img.classList.add("square");
|
|
} else {
|
|
img.classList.add("landscape");
|
|
}
|
|
};
|
|
|
|
const onLoad = () => {
|
|
console.log("Image loaded:", src);
|
|
handleImage();
|
|
};
|
|
|
|
return (
|
|
// <div className="relative overflow-hidden bg-[#e9e9e9] blurry-wrapper">
|
|
// <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
|
|
// <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
|
|
// </div>
|
|
<div
|
|
className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
|
|
key={key}
|
|
style={style}
|
|
>
|
|
<div
|
|
className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg"
|
|
style={{ backgroundImage: `url(${imgSrc})` }}
|
|
></div>
|
|
<div
|
|
className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg"
|
|
style={{ backgroundImage: `url(${imgSrc})` }}
|
|
></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageBlurry;
|