Enhance ImageMod Component to Support External URLs

Updated the `ImageMod.astro` component to handle both local image paths and external URLs.

- Added support for external image URLs by checking if the `src` attribute starts with `http` or `https`.
- Modified the image rendering logic to use a standard `img` tag for external URLs and continue using the `Image` component for local images.
- Added validation and error logging for local images, ensuring proper handling for both local and external images.

This update allows the blog card component to display images from external sources, enhancing flexibility in managing blog content.

Co-Authored-By: Krishna Chaitanya Ethamukkala <[email protected]>
Co-Authored-By: Diego Santos <[email protected]>

Author: 3 people

src/content/blog/english/post-2.md

@@ -2,8 +2,8 @@
 title: "Building an Image-to-Text Converter with Handwritten Text Recognition"
 meta_title: ""
 description: "Image to text"
-date: 2022-04-04T05:00:00Z
-image: "/images/image-placeholder.png"
+date: 2024-09-04T05:00:00Z
+image: "https://www.pdfgear.com/pdf-converter/img/how-to-convert-handwriting-to-text-1.png"
 categories: ["Project","python", "Image text converter"]
 author: "Krishna Chaitanya"
 tags: ["Python", "image-to-text"]

src/content/blog/english/post-3.md

@@ -3,7 +3,7 @@ title: "Loan Eligibility Predective Analyser"
 meta_title: ""
 description: "This repository presents a comprehensive predictive analytics solution for determining loan eligibility, leveraging advanced machine learning techniques and data preprocessing methodologies. The project is implemented in Google Colab, utilizing a dataset from Kaggle's Loan Data repository, which encompasses a diverse range of attributes pertinent to creditworthiness assessment."
 date: 2024-09-15T05:00:00Z
-image: "/images/image-placeholder.png"
+image: "https://cdn-images-1.medium.com/max/720/1*icDC8PUuu71tQCuDzl6zQg.png"
 categories: ["Project","Python","Software"]
 author: "Sanjeevan S"
 tags: ["Machine Learning", "Python3", "Kaggle" , "Pandas" , "Numpy"]

src/layouts/components/ImageMod.astro

@@ -28,33 +28,51 @@ let {
   style,
 } = Astro.props;
 
-src = `/public${src}`;
+// Determine if the src is an external URL or a local path
+const isExternal = src.startsWith("http") || src.startsWith("https");
+
+// Handle external and local image paths
+const imageSrc = isExternal ? src : `/public${src}`;
 
 // Glob pattern to load images from the /public/images folder
 const images = import.meta.glob("/public/images/**/*.{jpeg,jpg,png,gif}");
 
-// Check if the source path is valid
-const isValidPath = images[src] ? true : false;
+// Check if the source path is valid (only for local images)
+const isValidPath = isExternal || images[imageSrc] ? true : false;
 
-// Log a warning message in red if the image is not found
+// Log a warning message in red if the image is not found (only for local images)
 !isValidPath &&
+  !isExternal &&
   console.error(
-    `\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /public/images folder.`,
+    `\x1b[31mImage not found - ${imageSrc}.\x1b[0m Make sure the image is in the /public/images folder.`,
   );
 ---
 
 {
   isValidPath && (
-    <Image
-      src={images[src]() as Promise<{ default: ImageMetadata }>}
-      alt={alt}
-      width={width}
-      height={height}
-      loading={loading}
-      decoding={decoding}
-      class={className}
-      format={format}
-      style={style}
-    />
+    isExternal ? (
+      <img
+        src={imageSrc}
+        alt={alt}
+        width={width}
+        height={height}
+        loading={loading}
+        decoding={decoding}
+        class={className}
+        style={style}
+      />
+    ) : (
+      <Image
+        src={images[imageSrc]() as Promise<{ default: ImageMetadata }>}
+        alt={alt}
+        width={width}
+        height={height}
+        loading={loading}
+        decoding={decoding}
+        class={className}
+        format={format}
+        style={style}
+      />
+    )
   )
 }