fix: medium images not working

suvnshr · Dec 19, 2024 · 0ef232b · 0ef232b
1 parent 6d23887
commit 0ef232b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/components/BlogCard.js b/components/BlogCard.js
@@ -12,6 +12,7 @@ import { htmlToText } from "html-to-text";
 import OuterLink from "./OuterLink";
 import Margin from "./Margin";
 import { OpenInNewOutlined } from "@material-ui/icons";
+import { extractImagePaths } from "../utils/extractImagePaths";
 
 const useStyles = makeStyles({
   root: {
@@ -57,12 +58,14 @@ export default function BlogCard({
     });
   }, []);
 
+  const imagePaths = extractImagePaths(description)
+
   return (
     <Card className={classes.root}>
       <CardMedia
         component="img"
         height="140"
-        image={thumbnail}
+        image={thumbnail || imagePaths?.[0]}
         className={classes.media}
         alt={title}
         title={title}

diff --git a/utils/extractImagePaths.js b/utils/extractImagePaths.js
@@ -0,0 +1,6 @@
+export function extractImagePaths(inputString) {
+  const regex =
+    /(?:https?:\/\/.*\.(?:jpg|jpeg|png|gif|bmp|svg))|(?:\/[^\s]*\.(?:jpg|jpeg|png|gif|bmp|svg))/gi;
+  const imagePaths = inputString.match(regex);
+  return imagePaths || [];
+}