image.view.tsx

//
import { prepareBaseUrl, getLocalStorageToken } from '@/app/core/utils/baseQuery';
import { useEffect, useRef } from 'react';
import { useParams } from 'react-router';

const LoadingImage = () => {
  const { fileId } = useParams();
  const baseUrl = prepareBaseUrl({
    apiVersion: 2,
  });

  const imgRef = useRef(null);

  useEffect(() => {
    const blobToDataURL = (blob: Blob, fn: any) => {
      const fr = new FileReader();
      fr.onload = (e) => fn(e.target?.result);
      fr.readAsDataURL(blob);
    }

    fetch(baseUrl + '/file/' + fileId, {
      headers: {
        'Authorization': 'Bearer ' + getLocalStorageToken()
      }
    })
    .then((response) => {
      return response.blob();
    })
    .then((blob) => {
      blobToDataURL(blob, (url: string) => {
        if (imgRef.current) {
          imgRef.current.src = url;
        }
      });
    });
  }, []);


  return (
    <img src="" alt="" ref={imgRef} />
  )
}

export default LoadingImage;