diff --git a/src/components/UserProfile/ExternalProfile.vue b/src/components/UserProfile/ExternalProfile.vue
index 2737d695b9955782811eeb0dfe958f2772591f85..2ab97adf0a3cab7d14e6145db480246453727d5c 100644
--- a/src/components/UserProfile/ExternalProfile.vue
+++ b/src/components/UserProfile/ExternalProfile.vue
@@ -6,6 +6,8 @@ import {UserService, BadgeService, GoalService, type GoalDTO, type BadgeDTO, Fri
 import { ItemService } from "@/api";
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
 let firstname = ref();
 let lastname = ref();
 const imageUrl = ref(`../src/assets/userprofile.png`);
@@ -40,7 +42,7 @@ async function setupForm() {
       streak.value = response.streak?.currentStreak;
     }
     if (response.profileImage) {
-      imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+      imageUrl.value = apiUrl + "/api/images/" + response.profileImage;
     }
     getInventory();
     getBadges();
@@ -177,7 +179,7 @@ const removeFriend = () => {
                   <div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
                     <div v-for="product in inventory" :key="product.id" class="card text-center"
                         style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black">
-                        <img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
+                        <img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
                             alt="..." />
                         <div class="card-body">
                             <h5 class="card-title">{{ product.itemName }}</h5>
@@ -201,7 +203,7 @@ const removeFriend = () => {
                         style="width: 12rem; border: none; cursor: pointer; margin: 1rem; 
                         border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top" 
                         data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
-                        <img :src="`http://localhost:8080/api/images/${badge.imageId}`" class="card-img-top"
+                        <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
                             alt="..." />
                         <div class="card-body">
                             <h5 class="card-title">{{ badge.badgeName }}</h5>