diff --git a/src/components/ui/image/ImageViewer.vue b/src/components/ui/image/ImageViewer.vue
index 9259a15..c0e0220 100644
--- a/src/components/ui/image/ImageViewer.vue
+++ b/src/components/ui/image/ImageViewer.vue
@@ -3,6 +3,7 @@
     <!-- Primary image display with progressive loading -->
     <div v-if="currentImageSrc" class="primary-image relative">
       <ProgressiveImage
+        :key="`image-${currentImageIndex}-${currentImageSrc}`"
         :src="currentImageSrc"
         :alt="alt || 'Image'"
         :container-class="containerClass"
diff --git a/src/components/ui/image/ProgressiveImage.vue b/src/components/ui/image/ProgressiveImage.vue
index 042546c..cb82a3a 100644
--- a/src/components/ui/image/ProgressiveImage.vue
+++ b/src/components/ui/image/ProgressiveImage.vue
@@ -17,7 +17,7 @@
         'progressive-image-loaded': isLoaded,
         'progressive-image-error': hasError
       }
-    ]" :loading="loading" @load="handleLoad" @error="handleError" /> -->
+    ]" :loading="loading" @load="handleLoad" @error="handleError" />
 
     <!-- Loading indicator (optional) -->
     <div v-if="showLoadingIndicator && !isLoaded && !hasError" class="progressive-image-loading-indicator">
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { Package } from 'lucide-vue-next'
 
 interface Props {
@@ -189,6 +189,17 @@ onMounted(() => {
   }
 })
 
+// Watch for src changes and reset loading state
+watch(() => props.src, (newSrc, oldSrc) => {
+  if (newSrc !== oldSrc) {
+    // Reset loading state when image source changes
+    isLoaded.value = false
+    hasError.value = false
+    isLoading.value = true
+    emit('loading-start')
+  }
+})
+
 // Expose methods for parent components
 defineExpose({
   reload: () => {