Display image.

src/Home.tsx

@@ -1,12 +1,40 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Image } from "react-bootstrap";
+import { atom, useAtom } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+
+const costmapImageQuery = async () => {
+    const resp = await fetch("api/costmap_image");
+    if (!resp.ok) {
+        throw new Error("Network response was not ok");
+    }
+    const blob = await resp.blob();
+    return URL.createObjectURL(blob);
+};
+
+const costmapImageAtom = atomWithQuery(() => ({
+    queryKey: ["costmap_image"],
+    queryFn: costmapImageQuery,
+    refetchInterval: 1000 // 1s
+}));
 
 export function Home() {
+  const [{ data, isPending, isError }] = useAtom(costmapImageAtom);
+
+  let costmapImage = () => {
+    if (isPending) {
+        return (<p>"Loading..."</p>);
+    }
+    if (isError) {
+        return(<p>"Error!"</p>);
+    }
+      return (<Image src={data} />);
+  };
   return (
     <div>
       <AppNav />
       <Container>
-        <p> Hello World! </p>
+          { costmapImage() }
       </Container>
       <Footer />
     </div>