use nuxt image

nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   ],
 
   modules: [
+    '@nuxt/image',
     '@nuxthq/studio',
     '@nuxthq/ui',
     '@pinia/nuxt',
@@ -44,4 +45,11 @@ export default defineNuxtConfig({
       enabled: true,
     },
   },
+
+  image: {
+    domains: [
+      'avatars0.githubusercontent.com',
+      'pbs.twimg.com'
+    ]
+  }
 })

src/pages/talents.vue

@@ -87,7 +87,7 @@ const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
         >
           <div class="flex">
             <div class="flex gap-6 items-center">
-              <img :src="talent.logo" class="z-20 h-12 w-12 rounded-md">
+              <NuxtImg :src="talent.logo" class="z-20 h-12 w-12 rounded-md" placeholder />
               <div>
                 <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
                   <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />

src/pages/writing/[slug].vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Post } from '~~/types'
+import type { Post } from '~~/types';
 
 const route = useRoute()
 const { data: postContent } = await useAsyncData<Post>(`writing:${route.params.slug}`, async () => await queryContent<Post>(`/writing/${route.params.slug}`).findOne())
@@ -79,7 +79,7 @@ async function handleLike() {
                 {{ postContent.description }}
               </p>
             </header>
-            <div class="w-full rounded-md my-8">
+            <div v-if="postContent.cover" class="w-full rounded-md my-8">
               {{ postContent.cover }}
             </div>
             <ClientOnly>

types.ts

@@ -30,9 +30,7 @@ export interface Post extends MarkdownParsedContent {
   description: string
   readingMins: number
   publishedAt: string
-  modifiedAt: string
+  cover?: string
-  cover: string
-  author: string
 }
 
 export interface Project extends MarkdownParsedContent {