Fix image in meta tags

src/components/core/MetaTags.astro

@@ -1,5 +1,6 @@
 ---
 import { getImage } from "@astrojs/image";
+import { getRelativeUrlByFilePath } from "~/utils/getRelativeUrlByFilePath";
 
 const { src: defaultImage } = await getImage({
   src: import("~/assets/images/default.png"),
@@ -10,11 +11,16 @@ const { src: defaultImage } = await getImage({
 const {
   title = "AstroWind",
   description = "",
-  image = defaultImage,
+  image: _image = defaultImage,
   canonical,
 } = Astro.props;
 
-const absoluteImageUrl = new URL(image, Astro.site);
+const image =
+  typeof _image === "string"
+    ? new URL(_image, Astro.site)
+    : typeof _image["src"] !== "undefined"
+    ? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
+    : null;
 ---
 
 <meta charset="UTF-8" />
@@ -28,21 +34,21 @@ const absoluteImageUrl = new URL(image, Astro.site);
 <!-- Google / Search Engine Tags -->
 <meta itemprop="name" content={title} />
 <meta itemprop="description" content={description} />
-<meta itemprop="image" content={absoluteImageUrl} />
+{image && <meta itemprop="image" content={image} />}
 
 <!-- Facebook Meta Tags -->
 {canonical && <meta property="og:url" content={canonical} />}
 <meta property="og:type" content="website" />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={absoluteImageUrl} />
+{image && <meta property="og:image" content={image} />}
 
 <!-- Twitter Meta Tags -->
 {canonical && <meta name="twitter:url" content={canonical} />}
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
-<meta name="twitter:image" content={absoluteImageUrl} />
+{image && <meta name="twitter:image" content={image} />}
 
 <!-- Fonts -->
 <link

src/utils/findImage.js

@@ -1,7 +1,9 @@
-export const findImage = async (imageRoute) => {
+import { getAllImages } from "~/utils/getAllImages";
-  const images = import.meta.glob("../assets/images/*");
 
-  const key = imageRoute.replace("~/", "../");
+export const findImage = async (imageRoute) => {
+  const images = await getAllImages();
+
+  const key = imageRoute.replace("~/", "/src/");
 
   const image =
     typeof imageRoute === "string" &&

src/utils/getAllImages.js

@@ -0,0 +1,13 @@
+const load = async function () {
+  const images = import.meta.glob("~/assets/images/*");
+
+  return images;
+};
+
+let _images;
+
+export const getAllImages = async () => {
+  _images = _images || load();
+
+  return await _images;
+};

src/utils/getRelativeUrlByFilePath.js

@@ -0,0 +1,11 @@
+import * as url from "url";
+
+const __src = url.fileURLToPath(new URL("../", import.meta.url));
+
+export const getRelativeUrlByFilePath = (filepath) => {
+  if (filepath) {
+    return "/" + filepath.substring(__src.length);
+  }
+
+  return null;
+};