From bef5ec2cead454420e1184bed210adc9e6902dc4 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sun, 15 Mar 2026 21:04:56 -0400
Subject: [PATCH] fix: add profile image fallback handlers for model and user
 avatars in remaining areas (#22486)

* fix(ui): add profile image fallback handlers for models and users

* Update UserList.svelte

* fix(ui): add profile image fallback handlers for models on New Chat page
---
 src/lib/components/admin/Users/UserList.svelte              | 3 +++
 src/lib/components/channel/MessageInput/MentionList.svelte  | 6 ++++++
 src/lib/components/channel/Messages/Message.svelte          | 6 ++++++
 src/lib/components/chat/ChatPlaceholder.svelte              | 3 +++
 src/lib/components/chat/MessageInput/Commands/Models.svelte | 3 +++
 src/lib/components/chat/ModelSelector/ModelItem.svelte      | 3 +++
 src/lib/components/chat/Placeholder.svelte                  | 3 +++
 src/lib/components/layout/Sidebar/PinnedModelItem.svelte    | 3 +++
 8 files changed, 30 insertions(+)

diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index ea2e82d868..0ccc59ebc3 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/src/lib/components/admin/Users/UserList.svelte
@@ -377,6 +377,9 @@
 										class="rounded-full w-6 min-w-6 h-6 object-cover mr-0.5 flex-shrink-0"
 										src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
 										alt="user"
+										on:error={(e) => {
+											e.currentTarget.src = '/favicon.png';
+										}}
 									/>
 								</ProfilePreview>
 
diff --git a/src/lib/components/channel/MessageInput/MentionList.svelte b/src/lib/components/channel/MessageInput/MentionList.svelte
index 6d7209f450..0d8ce88197 100644
--- a/src/lib/components/channel/MessageInput/MentionList.svelte
+++ b/src/lib/components/channel/MessageInput/MentionList.svelte
@@ -200,12 +200,18 @@
 								src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${item.id}&lang=${$i18n.language}`}
 								alt={item?.data?.name ?? item.id}
 								class="rounded-full size-5 items-center mr-2"
+								on:error={(e) => {
+									e.currentTarget.src = '/favicon.png';
+								}}
 							/>
 						{:else if item.type === 'user'}
 							<img
 								src={`${WEBUI_API_BASE_URL}/users/${item.id}/profile/image`}
 								alt={item?.label ?? item.id}
 								class="rounded-full size-5 items-center mr-2"
+								on:error={(e) => {
+									e.currentTarget.src = '/favicon.png';
+								}}
 							/>
 						{/if}
 
diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index 39b08fd798..ea87090cd9 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -242,6 +242,9 @@
 							alt={message.reply_to_message.meta.model_name ??
 								message.reply_to_message.meta.model_id}
 							class="size-4 ml-0.5 rounded-full object-cover"
+							on:error={(e) => {
+								e.currentTarget.src = '/favicon.png';
+							}}
 						/>
 					{:else}
 						<img
@@ -278,6 +281,9 @@
 							src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${message.meta.model_id}`}
 							alt={message.meta.model_name ?? message.meta.model_id}
 							class="size-8 translate-y-1 ml-0.5 object-cover rounded-full"
+							on:error={(e) => {
+								e.currentTarget.src = '/favicon.png';
+							}}
 						/>
 					{:else}
 						<ProfilePreview user={message.user}>
diff --git a/src/lib/components/chat/ChatPlaceholder.svelte b/src/lib/components/chat/ChatPlaceholder.svelte
index 0286822931..e80b09a45e 100644
--- a/src/lib/components/chat/ChatPlaceholder.svelte
+++ b/src/lib/components/chat/ChatPlaceholder.svelte
@@ -57,6 +57,9 @@
 								class=" size-[2.7rem] rounded-full border-[1px] border-gray-100 dark:border-none"
 								alt="logo"
 								draggable="false"
+								on:error={(e) => {
+									e.currentTarget.src = '/favicon.png';
+								}}
 							/>
 						</Tooltip>
 					</button>
diff --git a/src/lib/components/chat/MessageInput/Commands/Models.svelte b/src/lib/components/chat/MessageInput/Commands/Models.svelte
index 452e27c1fa..61ae3cebee 100644
--- a/src/lib/components/chat/MessageInput/Commands/Models.svelte
+++ b/src/lib/components/chat/MessageInput/Commands/Models.svelte
@@ -86,6 +86,9 @@
 						src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 						alt={model?.name ?? model.id}
 						class="rounded-full size-5 items-center mr-2"
+						on:error={(e) => {
+							e.currentTarget.src = '/favicon.png';
+						}}
 					/>
 					<div class="truncate">
 						{model.name}
diff --git a/src/lib/components/chat/ModelSelector/ModelItem.svelte b/src/lib/components/chat/ModelSelector/ModelItem.svelte
index ebc7c995c2..b5a29ffe96 100644
--- a/src/lib/components/chat/ModelSelector/ModelItem.svelte
+++ b/src/lib/components/chat/ModelSelector/ModelItem.svelte
@@ -82,6 +82,9 @@
 						alt={$i18n.t('{{modelName}} profile image', { modelName: item.label })}
 						class="rounded-full size-5 flex items-center"
 						loading="lazy"
+						on:error={(e) => {
+							e.currentTarget.src = '/favicon.png';
+						}}
 					/>
 				</Tooltip>
 			</div>
diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index 0fefedef07..b7236dc60e 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/src/lib/components/chat/Placeholder.svelte
@@ -128,6 +128,9 @@
 											class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-100 dark:border-none"
 											aria-hidden="true"
 											draggable="false"
+											on:error={(e) => {
+												e.currentTarget.src = '/favicon.png';
+											}}
 										/>
 									</button>
 								</Tooltip>
diff --git a/src/lib/components/layout/Sidebar/PinnedModelItem.svelte b/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
index 79d51b88ee..42340d9fbf 100644
--- a/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
+++ b/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
@@ -39,6 +39,9 @@
 					src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 					class=" size-5 rounded-full -translate-x-[0.5px]"
 					alt="logo"
+					on:error={(e) => {
+						e.currentTarget.src = '/favicon.png';
+					}}
 				/>
 			</div>