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

@@ -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>
 

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}
 

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}>

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>

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}

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>

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>

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>