Fix article image path on index page

content.config.ts

@@ -16,4 +16,4 @@ export default defineContentConfig({
 			})
 		})
 	}
-})
+});

src/components/content/prose-img.vue

@@ -8,8 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"
-import { useRuntimeConfig, computed } from "#imports"
+import { computed } from "#imports"
 
 import ImageComponent from "#build/mdc-image-component.mjs"
 
@@ -43,17 +42,11 @@ const props = defineProps({
 		type: String,
 		default: "lazy" // eager, lazy
 	},
-})
+});
 
 const refinedSrc = computed(() => {
-	if (props.src?.startsWith("/") && !props.src.startsWith("//")) {
-		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
-		if (_base !== "/" && !props.src.startsWith(_base)) {
-			return joinURL(_base, props.src)
-		}
-	}
-	return props.src
-})
+	return getPublicPath(props.src);
+});
 </script>
 
 <!--

src/pages/articles/index.vue

@@ -5,7 +5,7 @@
 		<div class="row pt-5" v-for="article in articles" :key="article.path">
 			<div class="col-5 col-lg-4 col-xl-3">
 				<NuxtLink v-if="article.img" :to="article.path">
-					<img class="img-fluid" :src="article.img as string" :alt="article.title" loading="lazy" :title="article.title">
+					<img class="img-fluid" :src="getPublicPath(article.img)" :alt="article.title" loading="lazy" :title="article.title">
 				</NuxtLink>
 			</div>
 			<div class="col-7 col-lg-8 col-xl-9">
@@ -41,7 +41,7 @@ a h4:hover {
 </style>
 
 <script setup lang="ts">
-import { useAsyncData, queryCollection } from "#imports";
+import { useAsyncData, queryCollection } from "#imports"
 
-const { data: articles } = await useAsyncData("articles", () => queryCollection("content").order("date", "DESC").all())
+const { data: articles } = await useAsyncData("articles", () => queryCollection("content").order("date", "DESC").all());
 </script>

src/utils/index.ts

@@ -1 +1,16 @@
+import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"
+import { useRuntimeConfig } from "#imports"
+
 export const isDev = process.env.NODE_ENV === "development";
+
+export const getPublicPath = function (path: string): string {
+	if (path?.startsWith("/") && !path.startsWith("//")) {
+		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
+		if (_base !== "/" && !path.startsWith(_base)) {
+			return joinURL(_base, path);
+		}
+	}
+	return path;
+}
+
+// datetime format