35 lines
749 B
TypeScript
35 lines
749 B
TypeScript
|
import { useState, useEffect } from "react";
|
||
|
|
|
||
|
|
const usePublicImage = (imageName: string) => {
|
||
|
|
const [imageUrl, setImageUrl] = useState<string | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadImage = async () => {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/${imageName}`);
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||
|
|
}
|
||
|
|
const blob = await response.blob();
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
setImageUrl(url);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error loading image:", error);
|
||
|
|
setImageUrl(null);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadImage();
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
if (imageUrl) {
|
||
|
|
URL.revokeObjectURL(imageUrl);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, [imageName]);
|
||
|
|
|
||
|
|
return { imageUrl };
|
||
|
|
};
|
||
|
|
|
||
|
|
export default usePublicImage;
|