prefixing BASE URL for images. will break existing hardcoded outside images

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -25,7 +25,11 @@ export default function ArticleCardSize4({
       <CardMedia
         component="img"
         alt="green iguana"
-        image={article.img}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
         sx={{
           height: { sm: 'auto', md: '50%' },
           aspectRatio: { sm: '16 / 9', md: '' },

src/blog/components/ArticleCards/ArticleCardSize6.tsx

@@ -25,7 +25,11 @@ export default function ArticleCardSize6({
       <CardMedia
         component="img"
         alt={article.title}
-        image={article.img}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
         sx={{
           aspectRatio: '16 / 9',
           borderBottom: '1px solid',

src/blog/components/ArticleMeta.tsx

@@ -30,12 +30,11 @@ export function ArticleMeta({
             <Avatar
               key={index}
               alt={author.name}
-              src={
+              src={(
-                (import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
                 "/" +
                 (author.avatar?.replace(/^\/+/, "") || "")
-                )
+              )}
-              }
               sx={{ width: 24, height: 24 }}
             />
           ))}

src/blog/components/Latest.tsx

@@ -75,7 +75,11 @@ function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
             <Avatar
               key={index}
               alt={author.name}
-              src={author.avatar}
+              src={(
+                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+                "/" +
+                (author.avatar?.replace(/^\/+/, "") || "")
+              )}
               sx={{ width: 24, height: 24 }}
             />
           ))}