fix image preview

src/App.vue

@@ -12,6 +12,7 @@ const isPaused = ref(false);
 const currentDate = ref(new Date().toISOString().split("T")[0]); // YYYY-MM-DD
 const timelineImages = ref<{ time: string; path: string }[]>([]);
 const selectedImage = ref<{ time: string; path: string } | null>(null);
+const previewSrc = ref("");
 const isFullscreen = ref(false);
 const isSettingsOpen = ref(false);
 const mergeScreens = ref(false);
@@ -59,11 +60,6 @@ const togglePauseState = async () => {
 const loadTimeline = async () => {
   if (!savePath.value) return;
   const dateStr = currentDate.value;
-  // Rust is joining paths, Tauri FS plugin has a resolve function or we can use string concat.
-  // Wait, readDir with an absolute path requires specific permissions in Tauri v2, or we need to use Rust to list files.
-  // Actually, standard `readDir` supports absolute paths if we configure scope in capabilities.
-  // We didn't allow `$fs:allow-read-all` or similar, we only added `fs:default`.
-  // The simplest way to fetch timeline is a custom Rust command since we already manage the paths there!
   // It's safer to read files from Rust and return a list of { time, absolute_path }.
   timelineImages.value = await invoke("get_timeline", { date: dateStr, baseDir: savePath.value });
 };
@@ -72,8 +68,15 @@ const refresh = async () => {
   await loadTimeline();
 };
 
-const selectImage = (img: { time: string; path: string }) => {
+const selectImage = async (img: { time: string; path: string }) => {
   selectedImage.value = img;
+  try {
+    const base64 = await invoke("get_image_base64", { path: img.path });
+    previewSrc.value = `data:image/jpeg;base64,${base64}`;
+  } catch (e) {
+    console.error("Failed to load image:", e);
+    previewSrc.value = "";
+  }
 };
 
 const getSrc = (path: string) => {
@@ -160,7 +163,7 @@ const getSrc = (path: string) => {
         <div v-if="selectedImage" class="flex-1 p-10 flex items-center justify-center overflow-hidden">
           <div class="relative max-w-full max-h-full group">
             <img 
-              :src="getSrc(selectedImage.path)" 
+              :src="previewSrc" 
               class="max-w-full max-h-full object-contain rounded-2xl shadow-[0_12px_30px_rgba(0,0,0,0.08)]"
             />
             <button 
@@ -259,7 +262,7 @@ const getSrc = (path: string) => {
         <X :size="32" />
       </button>
       <img 
-        :src="getSrc(selectedImage.path)" 
+        :src="previewSrc" 
         class="max-w-full max-h-full object-contain"
       />
     </div>