use util function to build url

Author: Jicheng Lu

src/lib/common/ProfileDropdown.svelte

@@ -5,6 +5,7 @@
 	import { userStore } from '$lib/helpers/store';
 	import { PUBLIC_SERVICE_URL } from '$env/static/public';
 	import { _ } from 'svelte-i18n';
+	import { buildUrl } from '$lib/helpers/utils/common';
 	
 	/** @type {any} */
 	export let user;
@@ -31,7 +32,7 @@
 	>
 		<img
 			class="rounded-circle header-profile-user"
-			src={`${PUBLIC_SERVICE_URL}${user?.avatar}?access_token=${$userStore?.token}`}
+			src={`${buildUrl(PUBLIC_SERVICE_URL, user?.avatar)}?access_token=${$userStore?.token}`}
 			alt=""
 			on:error={e => handleAvatarLoad(e)}
 		/>

src/lib/helpers/utils/common.js

@@ -1,3 +1,11 @@
 export function range(size = 3, startAt = 0) {
     return [...Array(size).keys()].map((i) => i + startAt);
-};
+};
+
+/**
+ * @param {string} baseUrl
+ * @param {string} relativePath
+ */
+export function buildUrl(baseUrl, relativePath) {
+    return new URL(relativePath, baseUrl);
+}

src/routes/page/user/me/+page.svelte

@@ -9,6 +9,7 @@
 	import { _ } from 'svelte-i18n';
 	import { userStore } from '$lib/helpers/store';
 	import { PUBLIC_SERVICE_URL } from '$env/static/public';
+	import { buildUrl } from '$lib/helpers/utils/common';
 	
 	/** @type {import('$types').UserModel} */
 	let currentUser;
@@ -69,7 +70,7 @@
 								on:drop={e => handleFileDrop(e)}
 							>
 								<img
-									src={`${PUBLIC_SERVICE_URL}${currentUser?.avatar}?access_token=${$userStore?.token}`}
+									src={`${buildUrl(PUBLIC_SERVICE_URL, currentUser?.avatar || '').href}?access_token=${$userStore?.token}`}
 									alt=""
 									class="img-thumbnail rounded-circle"
 									style="width: 100%; height: 100%;"