fix(frontend): do not use backend url in <img> (#2424)

* fronted: do not use backend url in <img>

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

src/frontend/src/components/headerComponent/index.tsx

@@ -5,7 +5,6 @@ import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
 import profileCircle from "../../assets/profile-circle.png";
 import {
-  BACKEND_URL,
   BASE_URL_API,
   LOCATIONS_TO_RETURN,
   USER_PROJECTS_HEADER,
@@ -50,11 +49,9 @@ export default function Header(): JSX.Element {
   const routeHistory = useLocationStore((state) => state.routeHistory);
 
   const profileImageUrl =
-    `${BACKEND_URL.slice(
+    `${BASE_URL_API}files/profile_pictures/${
-      0,
+      userData?.profile_image ?? "Space/046-rocket.svg"
-      BACKEND_URL.length - 1,
+    }` ?? profileCircle;
-    )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
-    profileCircle;
   async function checkForChanges(): Promise<void> {
     if (nodes.length === 0) {
       await removeFlow(id!);
@@ -202,14 +199,7 @@ export default function Header(): JSX.Element {
                   className="shrink-0"
                 >
                   <img
-                    src={
+                    src={profileImageUrl}
-                      `${BACKEND_URL.slice(
-                        0,
-                        BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${
-                        userData?.profile_image ?? "Space/046-rocket.svg"
-                      }` ?? profileCircle
-                    }
                     className="h-7 w-7 shrink-0 focus-visible:outline-0"
                   />
                 </Button>
@@ -220,14 +210,7 @@ export default function Header(): JSX.Element {
                     <DropdownMenuLabel>
                       <div className="flex items-center gap-3">
                         <img
-                          src={
+                          src={profileImageUrl}
-                            `${BACKEND_URL.slice(
-                              0,
-                              BACKEND_URL.length - 1,
-                            )}${BASE_URL_API}files/profile_pictures/${
-                              userData?.profile_image ?? "Space/046-rocket.svg"
-                            }` ?? profileCircle
-                          }
                           className="h-5 w-5 focus-visible:outline-0"
                         />
 

src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx

@@ -27,10 +27,7 @@ export default function FileCard({
 
   const fileWrapperClasses = getClasses(isHovered);
 
-  const imgSrc = `${BACKEND_URL.slice(
+  const imgSrc = `${BASE_URL_API}files/images/${content}`;
-    0,
-    BACKEND_URL.length - 1,
-  )}${BASE_URL_API}files/images/${content}`;
 
   if (showFile) {
     if (imgTypes.has(fileType)) {

src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx

@@ -17,12 +17,7 @@ export default async function handleDownload({
   try {
     isDownloading = true;
 
-    const response = await fetch(
+    const response = await fetch(`${BASE_URL_API}files/download/${content}`);
-      `${BACKEND_URL.slice(
-        0,
-        BACKEND_URL.length - 1,
-      )}${BASE_URL_API}files/download/${content}`,
-    );
     if (!response.ok) {
       throw new Error("Network response was not ok");
     }

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx

@@ -1,8 +1,5 @@
 import { useEffect } from "react";
-import {
+import { BASE_URL_API } from "../../../../../../../../../constants/constants";
-  BACKEND_URL,
-  BASE_URL_API,
-} from "../../../../../../../../../constants/constants";
 
 const usePreloadImages = (
   profilePictures: { [key: string]: string[] },
@@ -24,12 +21,11 @@ const usePreloadImages = (
 
   useEffect(() => {
     const imageArray: string[] = [];
-    const firstUrl = `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}`;
 
     Object.keys(profilePictures).flatMap((folder) =>
       profilePictures[folder].map((path) =>
         imageArray.push(
-          `${firstUrl}${BASE_URL_API}files/profile_pictures/${folder}/${path}`,
+          `${BASE_URL_API}files/profile_pictures/${folder}/${path}`,
         ),
       ),
     );

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx

@@ -1,10 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Button } from "../../../../../../../../components/ui/button";
 import Loading from "../../../../../../../../components/ui/loading";
-import {
+import { BASE_URL_API } from "../../../../../../../../constants/constants";
-  BACKEND_URL,
-  BASE_URL_API,
-} from "../../../../../../../../constants/constants";
 import { useDarkStore } from "../../../../../../../../stores/darkStore";
 import { cn } from "../../../../../../../../utils/utils";
 import usePreloadImages from "./hooks/use-preload-images";
@@ -55,10 +52,7 @@ export default function ProfilePictureChooserComponent({
                   >
                     <img
                       key={idx}
-                      src={`${BACKEND_URL.slice(
+                      src={`${BASE_URL_API}files/profile_pictures/${
-                        0,
-                        BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${
                         folder + "/" + path
                       }`}
                       style={{