Refactors image component to support ref forwarding

Enables ref forwarding for improved integration with parent components
and libraries that require direct DOM access. Enhances flexibility and
maintainability by switching to a forwardRef implementation.

components/image-with-basepath.tsx

@@ -1,8 +1,9 @@
-import NextImage from "next/image"
-import type * as React from "react"
+import NextImage, { type ImageProps } from "next/image"
+import { forwardRef } from "react"
 import { getAssetUrl } from "@/lib/base-path"
 
-export default function Image(props: React.ComponentProps<typeof NextImage>) {
+export default forwardRef<HTMLImageElement, ImageProps>(
+    function Image(props, ref) {
         const src =
             typeof props.src === "string" &&
             props.src.startsWith("/") &&
@@ -10,5 +11,6 @@ export default function Image(props: React.ComponentProps<typeof NextImage>) {
                 ? getAssetUrl(props.src)
                 : props.src
 
-    return <NextImage {...props} src={src} />
-}
+        return <NextImage {...props} src={src} ref={ref} />
+    },
+)