Applied NuxtImg to pages and components

pages/about/achievements.vue

@@ -28,7 +28,7 @@ useSeoMeta(
         </section>
 
         <section>
-            <img
+            <NuxtImg
                 src="/images/koshien2020_mission-rogo.png"
                 alt="2020 Mission Logo"
                 class="float-right"
@@ -58,7 +58,7 @@ useSeoMeta(
         <section>
             <h3>種子島ロケットコンテスト</h3>
             <h4>滑空・定点回収</h4>
-            <img
+            <NuxtImg
                 src="/images/rocket_top.jpg"
                 alt="rockets"
                 class="float-right"
@@ -93,7 +93,7 @@ useSeoMeta(
             </ul>
             <br />
             <h4>CanSat</h4>
-            <img
+            <NuxtImg
                 src="/images/cansat/cansat_03.jpg"
                 alt="Sample Image"
                 class="float-right"
@@ -145,7 +145,7 @@ useSeoMeta(
 
         <section>
             <h2>その他活動実績 (イベントなど)</h2>
-            <img
+            <NuxtImg
                 src="/images/uchu_fea.jpg"
                 alt="Sample Image"
                 class="float-right"

pages/about/gallery.vue

@@ -63,7 +63,7 @@ useSeoMeta(
                 :key="entry.id"
             >
                 <figure>
-                    <img :src="entry.imagePath" :alt="entry.caption" />
+                    <NuxtImg :src="entry.imagePath" :alt="entry.caption" />
                     <figcaption>{{ entry.caption }}</figcaption>
                 </figure>
             </div>
@@ -73,7 +73,7 @@ useSeoMeta(
                 <button @click="closeViewer" class="close">
                     <Icon name="ic:baseline-close" />
                 </button>
-                <img :src="imagePathViewer" :alt="captionViewer" />
+                <NuxtImg :src="imagePathViewer" :alt="captionViewer" />
                 <p>{{ captionViewer }}</p>
                 <button @click="changeImage(Direction.FORWARD)" class="next">
                     <Icon name="material-symbols:arrow-forward-rounded" />
@@ -163,6 +163,7 @@ main {
     grid-area: caption;
     justify-self: center;
     align-self: flex-end;
+    margin-inline: 1.25rem;
 }
 
 .image-viewer .close {

pages/about/sera.vue

@@ -15,7 +15,11 @@ useSeoMeta(
     <PankuzuList current-page-name="SERAについて" />
     <main>
         <section>
-            <img src="/sera-logo-text.svg" alt="SERA Logo" class="float-left" />
+            <NuxtImg
+                src="/sera-logo-text.svg"
+                alt="SERA Logo"
+                class="float-left"
+            />
             <p>
                 宇宙分野に興味ある学生が集い、宇宙理工学に関する知識を身に付けると共に、宇宙分野に関連する各種競技会へ参加して人間力と実践力を養うことを目的に活動しています。
             </p>