Merge branch 'main' of github.com:nuxt-themes/alpine

Author: Tahul

components/AppHeader.vue

@@ -22,8 +22,8 @@ const show = ref(false)
 
     <div class="logo">
       <NuxtLink v-if="alpine.header.logo" to="/">
-        <img class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt">
-        <img class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt">
+        <NuxtImg class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt" />
+        <NuxtImg class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt" />
       </NuxtLink>
       <NuxtLink v-else to="/" class="fallback">
         {{ alpine.title }}

components/content/ArticlesListItem.vue

@@ -26,7 +26,7 @@ defineProps({
   <article v-if="article._path && article.title" :class="{ 'featured': featured }">
     <div class="image">
       <NuxtLink :to="article._path">
-        <img v-if="article.cover" :src="article.cover" :alt="article.title">
+        <NuxtImg v-if="article.cover" :src="article.cover" :alt="article.title" />
       </NuxtLink>
     </div>
 

components/content/Gallery.vue

@@ -14,11 +14,11 @@ defineProps({
     <div
       class="layout"
     >
-      <img
+      <NuxtImg
         v-for="(image, index) in images"
         :key="index"
         :src="image"
-      >
+      />
     </div>
   </section>
 </template>

components/content/Hero.vue

@@ -30,12 +30,12 @@ defineProps({
           </ContentSlot>
         </div>
       </div>
-      <img
+      <NuxtImg
         v-if="image"
         :class="imagePosition"
         :src="image"
         :alt="imageAlt"
-      >
+      />
     </div>
   </section>
 </template>