this is ugly but it works

src/components/Image.tsx

@@ -1,13 +1,40 @@
+import ImageStyle from "@/styles/Image.module.sass"
+import Link from "./Link";
 
 
+// const regex = /@(?<username>\w*)@(?<site>\w*\S*)/gm;
+
 const Image = ({ src, alt }: { src: string, alt: string }) => {
-    return (
+    const regex = /@(?<username>\w+)@(?<site>\w{2,}\.[a-z]{2,10})/gm;
-        <figure>
+    if (alt.match(regex)) {
-            <img style={{
+        const newAlt = alt.replace("art by", "")
-                borderRadius: "10px",
+        const sub = "https://$<site>/@$<username>";
-            }} src={src} alt={alt} />
+        const link = newAlt.replace(regex, sub);
-        </figure>
+        return (
-    );
+            <figure>
+                <img style={{
+                    borderRadius: "10px",
+                }} src={src} alt={alt} />
+                <span className={ImageStyle.alt} > art by <Link
+                    href={link}
+                    title={newAlt.replace(regex, link).replace('https://', "")}
+                /></span>
+            </figure>
+        )
+    }
+
+    else {
+
+        return (
+            <figure>
+                <img style={{
+                    borderRadius: "10px",
+                }} src={src} alt={alt} />
+                <span className={ImageStyle.alt}>{alt}</span>
+
+            </figure>
+        );
+    }
 };
 
 export default Image;