イメージへのパスからBlobUrlを取得する

featchで取得し、URL.createObjectURLでオブジェクトURLを生成する

const convertToBlobUrl = async (imagePath: string) => {
	const response = await fetch(imagePath);
	if (!response.ok) {
	    throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
	}
	const blob = await response.blob();
	return URL.createObjectURL(blob);
};

URL.createObjectURL()
でオブジェクトURLを生成したら、
URL.revokeObjectURL()
でオブジェクトURLを解放する必要あり

blobUrlをsetDataUrl

const [dataUrl, setDataUrl] = useState("");
useEffect(() => {
	convertToBlobUrl(imageUrl).then((blobUrl) => {
		setDataUrl(blobUrl);
	});
}, [imageUrl]);

return {
	<Sample url={dataUrl} />
}