From 0b00ae065d3272f1dfaa4f6c6656c7a8f8c02548 Mon Sep 17 00:00:00 2001
From: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Date: Fri, 26 Jul 2024 16:42:03 +0000
Subject: [PATCH] use `getImageAbsoluteURI` inside Avatar-like components

---
 .../calendar/components/CalendarEventRow.tsx  |  3 +-
 .../activities/comment/CommentHeader.tsx      |  3 +-
 .../activities/components/ParticipantChip.tsx |  3 +-
 .../emails/components/EmailThreadPreview.tsx  |  9 ++----
 .../timeline/components/TimelineActivity.tsx  |  5 +---
 .../favorites/components/Favorites.tsx        |  3 +-
 .../components/GenericEntityFilterChip.tsx    |  4 +--
 .../MultipleObjectRecordSelectItem.tsx        |  3 +-
 .../components/SelectableMenuItemSelect.tsx   |  3 +-
 .../MultipleRecordSelectDropdown.tsx          |  3 +-
 .../components/ProfilePictureUploader.tsx     |  3 +-
 .../components/WorkspaceLogoUploader.tsx      |  3 +-
 .../ui/input/components/ImageInput.tsx        | 15 ++++++----
 .../src/modules/users/components/UserChip.tsx |  4 +--
 .../components/WorkspaceMemberCard.tsx        |  3 +-
 .../src/display/avatar/components/Avatar.tsx  | 20 ++++++++-----
 .../twenty-ui/src/utilities/config/index.ts   | 30 +++++++++++++++++++
 .../utilities/image/getImageAbsoluteURI.ts    | 15 ++++++++++
 packages/twenty-ui/src/utilities/index.ts     |  1 +
 19 files changed, 84 insertions(+), 49 deletions(-)
 create mode 100644 packages/twenty-ui/src/utilities/config/index.ts
 create mode 100644 packages/twenty-ui/src/utilities/image/getImageAbsoluteURI.ts

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
index 3185c3c71b50..bdaf54830ddd 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
@@ -16,7 +16,6 @@ import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 import { CalendarChannelVisibility } from '~/generated/graphql';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 type CalendarEventRowProps = {
@@ -163,7 +162,7 @@ export const CalendarEventRow = ({
               key={[participant.workspaceMemberId, participant.displayName]
                 .filter(isDefined)
                 .join('-')}
-              avatarUrl={getImageAbsoluteURI(participant.avatarUrl)}
+              avatarUrl={participant.avatarUrl}
               placeholder={
                 participant.firstName && participant.lastName
                   ? `${participant.firstName} ${participant.lastName}`
diff --git a/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx b/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
index 86a02f2b1e7a..c40cd8f26a57 100644
--- a/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
+++ b/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
@@ -6,7 +6,6 @@ import {
   beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -60,7 +59,7 @@ export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
     <StyledContainer>
       <StyledLeftContainer>
         <Avatar
-          avatarUrl={getImageAbsoluteURI(avatarUrl)}
+          avatarUrl={avatarUrl}
           size="md"
           placeholderColorSeed={author?.id}
           placeholder={authorName}
diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
index fa40dbc0ad7c..82d48531db0e 100644
--- a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
@@ -4,7 +4,6 @@ import { Avatar } from 'twenty-ui';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledAvatar = styled(Avatar)`
   margin-right: ${({ theme }) => theme.spacing(1)};
@@ -74,7 +73,7 @@ export const ParticipantChip = ({
       ) : (
         <StyledChip>
           <StyledAvatar
-            avatarUrl={getImageAbsoluteURI(avatarUrl)}
+            avatarUrl={avatarUrl}
             type="rounded"
             placeholder={displayName}
             size="sm"
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
index e6b27eb8b466..e381b1bac358 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -10,7 +10,6 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledCardContent = styled(CardContent)<{
   visibility: MessageChannelVisibility;
@@ -154,22 +153,20 @@ export const EmailThreadPreview = ({
       <StyledHeading unread={!thread.read}>
         <StyledParticipantsContainer>
           <Avatar
-            avatarUrl={getImageAbsoluteURI(thread?.firstParticipant?.avatarUrl)}
+            avatarUrl={thread?.firstParticipant?.avatarUrl}
             placeholder={thread.firstParticipant.displayName}
             type="rounded"
           />
           {thread?.lastTwoParticipants?.[0] && (
             <StyledAvatar
-              avatarUrl={getImageAbsoluteURI(
-                thread.lastTwoParticipants[0].avatarUrl,
-              )}
+              avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
               placeholder={thread.lastTwoParticipants[0].displayName}
               type="rounded"
             />
           )}
           {finalDisplayedName && (
             <StyledAvatar
-              avatarUrl={getImageAbsoluteURI(finalAvatarUrl)}
+              avatarUrl={finalAvatarUrl}
               placeholder={finalDisplayedName}
               type="rounded"
               color={isCountIcon ? GRAY_SCALE.gray50 : undefined}
diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
index a80c3ff774b5..819bcc73d7a0 100644
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
@@ -11,7 +11,6 @@ import {
   beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledAvatarContainer = styled.div`
   align-items: center;
@@ -154,9 +153,7 @@ export const TimelineActivity = ({
       <StyledTimelineItemContainer>
         <StyledAvatarContainer>
           <Avatar
-            avatarUrl={getImageAbsoluteURI(
-              activityForTimeline.author?.avatarUrl,
-            )}
+            avatarUrl={activityForTimeline.author?.avatarUrl}
             placeholder={activityForTimeline.author?.name.firstName ?? ''}
             size="sm"
             type="rounded"
diff --git a/packages/twenty-front/src/modules/favorites/components/Favorites.tsx b/packages/twenty-front/src/modules/favorites/components/Favorites.tsx
index 5366ece6e6b0..1c14dc8b3cf3 100644
--- a/packages/twenty-front/src/modules/favorites/components/Favorites.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/Favorites.tsx
@@ -10,7 +10,6 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useFavorites } from '../hooks/useFavorites';
 
@@ -81,7 +80,7 @@ export const Favorites = () => {
                         Icon={() => (
                           <StyledAvatar
                             placeholderColorSeed={recordId}
-                            avatarUrl={getImageAbsoluteURI(avatarUrl)}
+                            avatarUrl={avatarUrl}
                             type={avatarType}
                             placeholder={labelIdentifier}
                             className="fav-avatar"
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
index 3903304d0674..2815490a20cb 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
@@ -1,7 +1,5 @@
 import { AvatarChip, IconComponent } from 'twenty-ui';
 
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
-
 import { Filter } from '../types/Filter';
 
 type GenericEntityFilterChipProps = {
@@ -17,7 +15,7 @@ export const GenericEntityFilterChip = ({
     placeholderColorSeed={filter.value}
     name={filter.displayValue}
     avatarType="rounded"
-    avatarUrl={getImageAbsoluteURI(filter.displayAvatarUrl) || ''}
+    avatarUrl={filter.displayAvatarUrl}
     LeftIcon={Icon}
   />
 );
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
index 7d73fb6ab06f..fc4061cfc9fd 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
@@ -10,7 +10,6 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 export const StyledSelectableItem = styled(SelectableItem)`
@@ -65,7 +64,7 @@ export const MultipleObjectRecordSelectItem = ({
         selected={selected}
         avatar={
           <Avatar
-            avatarUrl={getImageAbsoluteURI(recordIdentifier.avatarUrl)}
+            avatarUrl={recordIdentifier.avatarUrl}
             placeholderColorSeed={objectRecordId}
             placeholder={recordIdentifier.name}
             size="md"
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
index c1eddec0c5ac..204467062765 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
@@ -6,7 +6,6 @@ import { EntityForSelect } from '@/object-record/relation-picker/types/EntityFor
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 type SelectableMenuItemSelectProps = {
   entity: EntityForSelect;
@@ -40,7 +39,7 @@ export const SelectableMenuItemSelect = ({
         hovered={isSelectedItemId}
         avatar={
           <Avatar
-            avatarUrl={getImageAbsoluteURI(entity.avatarUrl)}
+            avatarUrl={entity.avatarUrl}
             placeholderColorSeed={entity.id}
             placeholder={entity.name}
             size="md"
diff --git a/packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx b/packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx
index a1440c2108f7..86e9ef5aa2cf 100644
--- a/packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx
@@ -6,7 +6,6 @@ import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 export const MultipleRecordSelectDropdown = ({
   recordsToSelect,
@@ -69,7 +68,7 @@ export const MultipleRecordSelectDropdown = ({
           }
           avatar={
             <Avatar
-              avatarUrl={getImageAbsoluteURI(record.avatarUrl)}
+              avatarUrl={record.avatarUrl}
               placeholderColorSeed={record.id}
               placeholder={record.name}
               size="md"
diff --git a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx
index 8cb3c910d0a6..cef17405c13b 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx
@@ -6,7 +6,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { ImageInput } from '@/ui/input/components/ImageInput';
 import { useUploadProfilePictureMutation } from '~/generated/graphql';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
@@ -101,7 +100,7 @@ export const ProfilePictureUploader = () => {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURI(currentWorkspaceMember?.avatarUrl)}
+      picture={currentWorkspaceMember?.avatarUrl}
       onUpload={handleUpload}
       onRemove={handleRemove}
       onAbort={handleAbort}
diff --git a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx
index ace4e9d2357c..4cff97476501 100644
--- a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx
+++ b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx
@@ -6,7 +6,6 @@ import {
   useUpdateWorkspaceMutation,
   useUploadWorkspaceLogoMutation,
 } from '~/generated/graphql';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 export const WorkspaceLogoUploader = () => {
@@ -57,7 +56,7 @@ export const WorkspaceLogoUploader = () => {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURI(currentWorkspace?.logo)}
+      picture={currentWorkspace?.logo}
       onUpload={onUpload}
       onRemove={onRemove}
     />
diff --git a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
index c992e5381197..df318dd3b6e7 100644
--- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React, { useMemo } from 'react';
 import { IconFileUpload, IconTrash, IconUpload, IconX } from 'twenty-ui';
 
 import { Button } from '@/ui/input/button/components/Button';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledContainer = styled.div`
@@ -105,16 +106,18 @@ export const ImageInput = ({
     hiddenFileInput.current?.click();
   };
 
+  const pictureURI = useMemo(() => getImageAbsoluteURI(picture), [picture]);
+
   return (
     <StyledContainer className={className}>
       <StyledPicture
-        withPicture={!!picture}
+        withPicture={!!pictureURI}
         disabled={disabled}
         onClick={onUploadButtonClick}
       >
-        {picture ? (
+        {pictureURI ? (
           <img
-            src={picture || '/images/default-profile-picture.png'}
+            src={pictureURI || '/images/default-profile-picture.png'}
             alt="profile"
           />
         ) : (
@@ -139,7 +142,7 @@ export const ImageInput = ({
               onClick={onAbort}
               variant="secondary"
               title="Abort"
-              disabled={!picture || disabled}
+              disabled={!pictureURI || disabled}
               fullWidth
             />
           ) : (
@@ -157,7 +160,7 @@ export const ImageInput = ({
             onClick={onRemove}
             variant="secondary"
             title="Remove"
-            disabled={!picture || disabled}
+            disabled={!pictureURI || disabled}
             fullWidth
           />
         </StyledButtonContainer>
diff --git a/packages/twenty-front/src/modules/users/components/UserChip.tsx b/packages/twenty-front/src/modules/users/components/UserChip.tsx
index a14f0ae4eb5a..58460c4d1dc7 100644
--- a/packages/twenty-front/src/modules/users/components/UserChip.tsx
+++ b/packages/twenty-front/src/modules/users/components/UserChip.tsx
@@ -1,7 +1,5 @@
 import { AvatarChip } from 'twenty-ui';
 
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
-
 export type UserChipProps = {
   id: string;
   name: string;
@@ -13,6 +11,6 @@ export const UserChip = ({ id, name, avatarUrl }: UserChipProps) => (
     placeholderColorSeed={id}
     name={name}
     avatarType="rounded"
-    avatarUrl={getImageAbsoluteURI(avatarUrl) || ''}
+    avatarUrl={avatarUrl}
   />
 );
diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx
index 94c9dcee1ac3..6ed05ce15f39 100644
--- a/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx
+++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { Avatar, OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
@@ -39,7 +38,7 @@ export const WorkspaceMemberCard = ({
 }: WorkspaceMemberCardProps) => (
   <StyledContainer>
     <Avatar
-      avatarUrl={getImageAbsoluteURI(workspaceMember.avatarUrl)}
+      avatarUrl={workspaceMember.avatarUrl}
       placeholderColorSeed={workspaceMember.id}
       placeholder={workspaceMember.name.firstName || ''}
       type="squared"
diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
index b0373b8cb8e5..81c3a80219ae 100644
--- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { isNonEmptyString, isUndefined } from '@sniptt/guards';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
@@ -8,7 +8,7 @@ import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPr
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { ThemeContext } from '@ui/theme';
-import { Nullable, stringToHslColor } from '@ui/utilities';
+import { Nullable, getImageAbsoluteURI, stringToHslColor } from '@ui/utilities';
 
 const StyledAvatar = styled.div<{
   size: AvatarSize;
@@ -73,15 +73,21 @@ export const Avatar = ({
     invalidAvatarUrlsState,
   );
 
-  const noAvatarUrl = !isNonEmptyString(avatarUrl);
+  const avatarImageURI = useMemo(
+    () => getImageAbsoluteURI(avatarUrl),
+    [avatarUrl],
+  );
+
+  const noAvatarUrl = !isNonEmptyString(avatarImageURI);
 
   const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
 
-  const showPlaceholder = noAvatarUrl || invalidAvatarUrls.includes(avatarUrl);
+  const showPlaceholder =
+    noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI);
 
   const handleImageError = () => {
-    if (isNonEmptyString(avatarUrl)) {
-      setInvalidAvatarUrls((prev) => [...prev, avatarUrl]);
+    if (isNonEmptyString(avatarImageURI)) {
+      setInvalidAvatarUrls((prev) => [...prev, avatarImageURI]);
     }
   };
 
@@ -105,7 +111,7 @@ export const Avatar = ({
       {showPlaceholder ? (
         placeholderChar
       ) : (
-        <StyledImage src={avatarUrl} onError={handleImageError} alt="" />
+        <StyledImage src={avatarImageURI} onError={handleImageError} alt="" />
       )}
     </StyledAvatar>
   );
diff --git a/packages/twenty-ui/src/utilities/config/index.ts b/packages/twenty-ui/src/utilities/config/index.ts
new file mode 100644
index 000000000000..4525e814d61b
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/config/index.ts
@@ -0,0 +1,30 @@
+declare global {
+  interface Window {
+    _env_?: Record<string, string>;
+    __APOLLO_CLIENT__?: any;
+  }
+}
+
+const getDefaultUrl = () => {
+  if (
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1'
+  ) {
+    // In development environment front and backend usually run on separate ports
+    // we set the default value to localhost:3000.
+    // It dev context, we use env vars to overwrite it
+    return 'http://localhost:3000';
+  } else {
+    // Outside of localhost we assume that they run on the same port
+    // because the backend will serve the frontend
+    // It prod context, we use env-config.js + window var to ovewrite it
+    return `${window.location.protocol}//${window.location.hostname}${
+      window.location.port ? `:${window.location.port}` : ''
+    }`;
+  }
+};
+
+export const REACT_APP_SERVER_BASE_URL =
+  window._env_?.REACT_APP_SERVER_BASE_URL ||
+  process.env.REACT_APP_SERVER_BASE_URL ||
+  getDefaultUrl();
diff --git a/packages/twenty-ui/src/utilities/image/getImageAbsoluteURI.ts b/packages/twenty-ui/src/utilities/image/getImageAbsoluteURI.ts
new file mode 100644
index 000000000000..879447d30215
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/image/getImageAbsoluteURI.ts
@@ -0,0 +1,15 @@
+import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
+
+export const getImageAbsoluteURI = (imageUrl?: string | null) => {
+  if (!imageUrl) {
+    return null;
+  }
+
+  if (imageUrl?.startsWith('https:')) {
+    return imageUrl;
+  }
+
+  const serverFilesUrl = REACT_APP_SERVER_BASE_URL;
+
+  return `${serverFilesUrl}/files/${imageUrl}`;
+};
diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts
index 3d99deafeead..38cd4a1b600a 100644
--- a/packages/twenty-ui/src/utilities/index.ts
+++ b/packages/twenty-ui/src/utilities/index.ts
@@ -1,4 +1,5 @@
 export * from './color/utils/stringToHslColor';
+export * from './image/getImageAbsoluteURI';
 export * from './isDefined';
 export * from './state/utils/createState';
 export * from './types/Nullable';