change avatar to use nextjs image url

frontend/src/app/blog/[articleSlug]/page.tsx

@@ -1,9 +1,10 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import BlockRendererClient from "@/components/BlockRendererClient";
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
+import { AvatarImageFix } from "@/components/AvatarImageFix";
 import ShareButtons from "@/components/ShareButtons";
 
 const STRAPI_URL = process.env.STRAPI_URL;
@@ -91,7 +92,7 @@ export default async function Page({
                 <div className="flex flex-1 justify-start gap-1">
                     {avatarURL && (
                         <Avatar className="">
-                            <AvatarImage src={avatarURL} />
+                            <AvatarImageFix src={avatarURL} />
                             <AvatarFallback>
                                 {// Get initials from author name
                                 authorName

frontend/src/components/AvatarImageFix.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/lib/utils";
+const STRAPI_URL = process.env.STRAPI_URL;
+
+const AvatarImageFix = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, src, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn("aspect-square h-full w-full", className)}
+        src={STRAPI_URL + "_next/image?url=" + src + "&w=100&q=100"}
+        {...props}
+    />
+));
+AvatarImageFix.displayName = "AvatarImageFix";
+
+export { AvatarImageFix };