From c3e05c2a1058b9f09f1f5ee33e0c7c4d4fd5efa5 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Fri, 3 Jan 2025 11:49:06 -0700
Subject: [PATCH] Add alt text to images in gallery and queue (#2136)

---
 src/components/common/ComfyImage.vue                | 6 +++++-
 src/components/sidebar/tabs/queue/ResultGallery.vue | 1 +
 src/components/sidebar/tabs/queue/ResultItem.vue    | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/common/ComfyImage.vue b/src/components/common/ComfyImage.vue
index 4f7aab145..efb269135 100644
--- a/src/components/common/ComfyImage.vue
+++ b/src/components/common/ComfyImage.vue
@@ -12,12 +12,14 @@
       :data-test="src"
       class="comfy-image-blur"
       :style="{ 'background-image': `url(${src})` }"
+      :alt="alt"
     />
     <img
       :src="src"
       @error="handleImageError"
       class="comfy-image-main"
       :class="[...classArray]"
+      :alt="alt"
     />
   </span>
   <div v-if="imageBroken" class="broken-image-placeholder">
@@ -34,9 +36,11 @@ const props = withDefaults(
     src: string
     class?: string | string[] | object
     contain: boolean
+    alt?: string
   }>(),
   {
-    contain: false
+    contain: false,
+    alt: 'Image content'
   }
 )
 
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index 5d409cbb2..619f77b09 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -24,6 +24,7 @@
         :key="item.url"
         :src="item.url"
         :contain="false"
+        :alt="item.filename"
         class="galleria-image"
         v-if="item.isImage"
       />
diff --git a/src/components/sidebar/tabs/queue/ResultItem.vue b/src/components/sidebar/tabs/queue/ResultItem.vue
index 70934143b..dea82e09a 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/src/components/sidebar/tabs/queue/ResultItem.vue
@@ -5,6 +5,7 @@
       :src="result.url"
       class="task-output-image"
       :contain="imageFit === 'contain'"
+      :alt="result.filename"
     />
     <ResultVideo v-else-if="result.isVideo" :result="result" />
     <div v-else class="task-result-preview">