Moved images to assets, rewrote to use Image component, fixed styling issues

src/components/servantCard.astro

@@ -1,36 +1,40 @@
 ---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+
 export interface Props {
   name: string
   level: string
   skills: string
   np: string
-  image_servant: string
-  image_bond: string
+  servantImageFile: string
+  bondceImageFile: string
   ml: string
-  bond10: string
+  bond10: boolean
 }
 
-const { bond10, ml, image_bond, image_servant, np, skills, level, name } =
-  Astro.props
+const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
+const servantImagePath = `/src/assets/servant/${servantImageFile}`
+const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
+const images_servants = import.meta.glob<{ default: ImageMetadata }>('/src/assets/servant/*.webp')
+const images_bond_ces = import.meta.glob<{ default: ImageMetadata }>('/src/assets/ce/bond-ce/*.webp')
 
-const servant_img: string = `/assets/servant/${image_servant}.webp`
-const bondce_img: string = `/assets/ce/bond-ce/${image_bond}.webp`
 let bondce_css: string = 'bond-ce'
 
-if (bond10 === 'false') {
+if (bond10 === false) {
   bondce_css += ' unobtained'
 }
 ---
 
 <article>
-  <img src={servant_img} alt={name} />
+  <Image src={images_servants[servantImagePath]()} alt={name} />
   <h2 class="subtext">
     Level {level}<br />
     {skills}<br />
     NP {np}
   </h2>
   <div class="expand-on-hover">
-    <img class={bondce_css} src={bondce_img} alt="" />
+    <Image src={images_bond_ces[bondceImagePath]()} alt="" class={bondce_css}/>
     <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
   </div>
 </article>