diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index ae5d4db..59049c3 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -33,7 +33,7 @@ let matchedImage_src;
if (matchedImage && !customFeaturedImage) {
matchedImage_src = await getImage({src: featuredImages[matchedImage], format: 'webp'}) || null;
}
-const firstImageURL = await ExtractFirstImage(Content)
+const firstImageURL = await ExtractFirstImage(Content,Astro.url.origin)
const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `/post/${slug}/featured.png` || '';
---
diff --git a/src/pages/post/[slug]/featured.png.js b/src/pages/post/[slug]/featured.png.js
index bcd4371..449cf73 100644
--- a/src/pages/post/[slug]/featured.png.js
+++ b/src/pages/post/[slug]/featured.png.js
@@ -20,22 +20,14 @@ async function getExternalImage(post) {
return matchedImage_?.src;
}
-// Function to check for images in markdown without rendering
-function checkForImages(markdownContent) {
- // Match markdown image syntax  or HTML
tags
- const imageRegex = /!\[.*?]\(.*?\)|/g;
- return imageRegex.test(markdownContent);
-}
-
// This function dynamically generates og:images for posts that don't have a featured image
export async function GET({ props }) {
const {post} = props;
const ExternalImageURL = await getExternalImage(post);
- const hasImage = checkForImages(post.body);
try {
// Check if a custom cover image already exists
- if (post.data.cover || ExternalImageURL || hasImage) {
- // set it to empty to prevent the image generation
+ if (post.data.cover || ExternalImageURL) {
+ // Redirect to the existing image
return new Response(null);
}
diff --git a/src/plugins/extract-images.js b/src/plugins/extract-images.js
index 7bb35d2..61253dd 100644
--- a/src/plugins/extract-images.js
+++ b/src/plugins/extract-images.js
@@ -3,7 +3,7 @@ import {getContainerRenderer as getMDXRenderer} from "@astrojs/mdx";
import {experimental_AstroContainer as AstroContainer} from "astro/container";
import {transform, walk} from "ultrahtml";
-export async function ExtractFirstImage(Content) {
+export async function ExtractFirstImage(Content, baseUrl = '') {
// Load MDX renderer. Other renderers for UI frameworks (e.g. React, Vue, etc.) would need adding here if you were using those.
const renderers = await loadRenderers([getMDXRenderer()]);
@@ -22,7 +22,15 @@ export async function ExtractFirstImage(Content) {
await walk(node, (node) => {
if (node.name === "img" && node.attributes.src) {
// Store the first image URL we find
- firstImageUrl = node.attributes.src;
+ if (!firstImageUrl) {
+ firstImageUrl = node.attributes.src.startsWith("/")
+ ? baseUrl + node.attributes.src
+ : node.attributes.src;
+ }
+ // Still update the src attribute if needed
+ if (node.attributes.src.startsWith("/")) {
+ node.attributes.src = baseUrl + node.attributes.src;
+ }
}
});
return node;