From 661885f5e568c2104544255285e83264c17e7633 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sat, 4 Oct 2025 04:03:36 +0800
Subject: [PATCH] feat(widgets): lazy load images in FormDropdown (#5904)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

some users may have a very large number of files, so we only need to
request/render the ones that are visible.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5904-feat-widgets-lazy-load-images-in-FormDropdown-2816d73d36508195b283ff469061f3f3)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../components/form/dropdown/FormDropdownMenuItem.vue       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
index 52040a6f3c..79cdfcb325 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
 
+import LazyImage from '@/components/common/LazyImage.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { AssetKindKey, type LayoutMode } from './types'
@@ -102,10 +103,11 @@ function handleVideoLoad(event: Event) {
         muted
         @loadeddata="handleVideoLoad"
       />
-      <img
+      <LazyImage
         v-else-if="mediaSrc"
         :src="mediaSrc"
-        class="size-full object-cover"
+        :alt="name"
+        image-class="size-full object-cover"
         @load="handleImageLoad"
       />
       <div