refac

src/lib/components/common/ImagePreview.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { onDestroy, getContext } from 'svelte';
 
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { WEBUI_BASE_URL } from '$lib/constants';
 	import PanzoomContainer from '$lib/components/common/PanzoomContainer.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
@@ -120,8 +122,21 @@
 							src.startsWith('https://')
 						) {
 							// Handle remote URLs
-							fetch(src)
-								.then((response) => response.blob())
+							const backendOrigin = new URL(WEBUI_BASE_URL || '/', window.location.origin).origin;
+							const isBackendUrl = new URL(src, window.location.origin).origin === backendOrigin;
+
+							fetch(
+								src,
+								isBackendUrl && localStorage.token
+									? { headers: { Authorization: `Bearer ${localStorage.token}` } }
+									: undefined
+							)
+								.then((response) => {
+									if (!response.ok) {
+										throw new Error(`Failed to download image: ${response.status}`);
+									}
+									return response.blob();
+								})
 								.then((blob) => {
 									// detect the MIME type from the blob
 									const mimeType = blob.type || 'image/png';
@@ -140,6 +155,7 @@
 								})
 								.catch((error) => {
 									console.error('Error downloading remote image:', error);
+									toast.error($i18n.t('Failed to download image'));
 								});
 							return;
 						}