Import photos as assets and properly compress late_afternoon.webp

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite-ssg build",
     "start": "vite preview"
   },

src/data.ts

@@ -1,28 +1,32 @@
+import lateAfternoonUrl from "./assets/photography/late_afternoon.webp"
+import martyrdomUrl from "./assets/photography/martyrdom.webp"
+import heatUrl from "./assets/photography/heat.webp"
+
 interface Photo {
-  file: string
   title: string
   altText: string
   date: string
   description: string
+  url: string
 }
 
 export const photos: Photo[] = [
   {
-    file: "Late_afternoon.webp",
     title: "Late afternoon",
     altText: "A red house in London",
     date: "2019",
-    description: "65 Curzon Street, Mayfair, London"
+    description: "65 Curzon Street, Mayfair, London",
+    url: lateAfternoonUrl
   },
   {
-    file: "Martyrdom.webp",
+    url: martyrdomUrl,
     title: "Martyrdom",
     altText: "A church on a vineyard",
     date: "2019",
     description: "The Sankt-Laurentius church by the Mosel river in Bremm (Germany)."
   },
   {
-    file: "Heat.webp",
+    url: heatUrl,
     title: "Heat",
     altText: "An orange passageway with windows on all walls",
     date: "2022",

src/pages/photography.vue

@@ -3,12 +3,12 @@
     <div class="flex flex-col space-y-30 lg:space-y-20">
       <div
         v-for="photo in photos"
-        :key="photo.file"
+        :key="photo.url"
         class="flex -lg:space-y-10 lg:space-x-10 -lg:flex-col -lg:items-center"
       >
-        <a class="lg:max-w-150 block w-full" :href="`/photography/${photo.file}`">
+        <a class="lg:max-w-150 block w-full" :href="photo.url">
           <SuspendingImage
-            :src="`/photography/${photo.file}`"
+            :src="photo.url"
             :alt="photo.altText"
             class="w-full max-h-80vh block object-contain"
           />