From ef397e97b1b8aa27cc214dced93e9d39e49bc736 Mon Sep 17 00:00:00 2001
From: Brainslug <br41nslug@users.noreply.github.com>
Date: Tue, 26 Jul 2022 17:29:14 +0200
Subject: [PATCH] broken assets paths when serving Directus from a subfolder
 (#14650)

* removing getrootpath

* removed redundant getRootPath from components

* We use leading / everywhere else in api usage

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/displays/file/file.vue                           | 5 ++---
 app/src/displays/image/image.vue                         | 3 +--
 app/src/displays/user/user.vue                           | 3 +--
 app/src/interfaces/file-image/file-image.vue             | 8 +++-----
 app/src/interfaces/file/file.vue                         | 3 +--
 app/src/layouts/cards/components/card.vue                | 3 +--
 app/src/modules/users/routes/item.vue                    | 3 +--
 app/src/views/private/components/comment-input.vue       | 3 +--
 app/src/views/private/components/comment-item-header.vue | 3 +--
 app/src/views/private/components/module-bar-avatar.vue   | 3 +--
 app/src/views/private/components/module-bar-logo.vue     | 3 +--
 app/src/views/private/components/user-popover.vue        | 3 +--
 app/src/views/public/public-view.vue                     | 7 +++----
 13 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index e83795ac33..cc99fa68f0 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -19,7 +19,6 @@
 import { defineComponent, PropType, computed, ref } from 'vue';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { useElementSize } from '@/composables/use-element-size';
-import { getRootPath } from '@/utils/get-root-path';
 
 type File = {
 	id: string;
@@ -45,9 +44,9 @@ export default defineComponent({
 
 		const imageThumbnail = computed(() => {
 			if (!props.value) return null;
-			if (props.value.type?.includes('svg')) return getRootPath() + `assets/${props.value.id}`;
+			if (props.value.type?.includes('svg')) return '/assets/' + props.value.id;
 			if (props.value.type?.includes('image') === false) return null;
-			return getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
+			return `/assets/${props.value.id}?key=system-small-cover`;
 		});
 
 		const { height } = useElementSize(previewEl);
diff --git a/app/src/displays/image/image.vue b/app/src/displays/image/image.vue
index cb8c7affce..e5d706616e 100644
--- a/app/src/displays/image/image.vue
+++ b/app/src/displays/image/image.vue
@@ -12,7 +12,6 @@
 </template>
 
 <script lang="ts">
-import { getRootPath } from '@/utils/get-root-path';
 import { computed, defineComponent, PropType, ref } from 'vue';
 
 type Image = {
@@ -37,7 +36,7 @@ export default defineComponent({
 
 		const src = computed(() => {
 			if (props.value?.id === null || props.value?.id === undefined) return null;
-			return getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
+			return `/assets/${props.value.id}?key=system-small-cover`;
 		});
 
 		return { src, imageError };
diff --git a/app/src/displays/user/user.vue b/app/src/displays/user/user.vue
index b79fccded1..5556359210 100644
--- a/app/src/displays/user/user.vue
+++ b/app/src/displays/user/user.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script lang="ts">
-import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
 import { computed, defineComponent, PropType } from 'vue';
 
@@ -55,7 +54,7 @@ export default defineComponent({
 			if (props.value === null) return null;
 
 			if (props.value.avatar?.id) {
-				return `${getRootPath()}assets/${props.value.avatar.id}?key=system-small-cover`;
+				return `/assets/${props.value.avatar.id}?key=system-small-cover`;
 			}
 
 			return null;
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index 3581999578..7cc78ac5a0 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -76,7 +76,6 @@ import api, { addTokenToURL } from '@/api';
 import { useRelationM2O } from '@/composables/use-relation-m2o';
 import { RelationQuerySingle, useRelationSingle } from '@/composables/use-relation-single';
 import { formatFilesize } from '@/utils/format-filesize';
-import { getRootPath } from '@/utils/get-root-path';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import FileLightbox from '@/views/private/components/file-lightbox.vue';
@@ -129,12 +128,11 @@ const src = computed(() => {
 	if (!image.value) return null;
 
 	if (image.value.type.includes('svg')) {
-		return getRootPath() + `assets/${image.value.id}`;
+		return '/assets/' + image.value.id;
 	}
 	if (image.value.type.includes('image')) {
 		const fit = props.crop ? 'cover' : 'contain';
-		const url =
-			getRootPath() + `assets/${image.value.id}?key=system-large-${fit}&cache-buster=${image.value.modified_on}`;
+		const url = `/assets/${image.value.id}?key=system-large-${fit}&cache-buster=${image.value.modified_on}`;
 		return addTokenToURL(url);
 	}
 
@@ -145,7 +143,7 @@ const ext = computed(() => (image.value ? readableMimeType(image.value.type, tru
 
 const downloadSrc = computed(() => {
 	if (!image.value) return null;
-	return addTokenToURL(getRootPath() + `assets/${image.value.id}`);
+	return addTokenToURL('/assets/' + image.value.id);
 });
 
 const meta = computed(() => {
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index beb3c262bb..59fed48b56 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -142,7 +142,6 @@ import { ref, computed, toRefs } from 'vue';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import api from '@/api';
 import { readableMimeType } from '@/utils/readable-mime-type';
-import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { addQueryToPath } from '@/utils/add-query-to-path';
@@ -198,7 +197,7 @@ const fileExtension = computed(() => {
 
 const assetURL = computed(() => {
 	const id = typeof props.value === 'string' ? props.value : props.value?.id;
-	return getRootPath() + `assets/${id}`;
+	return '/assets/' + id;
 });
 
 const imageThumbnail = computed(() => {
diff --git a/app/src/layouts/cards/components/card.vue b/app/src/layouts/cards/components/card.vue
index ec4639a373..c173c31eec 100644
--- a/app/src/layouts/cards/components/card.vue
+++ b/app/src/layouts/cards/components/card.vue
@@ -31,7 +31,6 @@
 </template>
 
 <script lang="ts">
-import { getRootPath } from '@/utils/get-root-path';
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -113,7 +112,7 @@ export default defineComponent({
 				key = 'system-medium-contain';
 			}
 
-			const source = getRootPath() + `assets/${props.file.id}?key=${key}&modified=${props.file.modified_on}`;
+			const source = `/assets/${props.file.id}?key=${key}&modified=${props.file.modified_on}`;
 
 			return { source, fileType };
 		});
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index 1d3972e23f..806c4b9c8e 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -196,7 +196,6 @@ import { useUserStore } from '@/stores/user';
 import { useCollectionsStore } from '@/stores/collections';
 import { useFieldsStore } from '@/stores/fields';
 import { useServerStore } from '@/stores/server';
-import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { userName } from '@/utils/user-name';
 import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
@@ -478,7 +477,7 @@ export default defineComponent({
 					});
 
 					avatarSrc.value = response.data.data.avatar?.id
-						? getRootPath() + `assets/${response.data.data.avatar.id}?key=system-medium-cover`
+						? `/assets/${response.data.data.avatar.id}?key=system-medium-cover`
 						: null;
 
 					roleName.value = response.data.data?.role?.name;
diff --git a/app/src/views/private/components/comment-input.vue b/app/src/views/private/components/comment-input.vue
index d7c61316a3..ce825fc204 100644
--- a/app/src/views/private/components/comment-input.vue
+++ b/app/src/views/private/components/comment-input.vue
@@ -69,7 +69,6 @@
 import api from '@/api';
 import vTemplateInput from '@/components/v-template-input.vue';
 import { useShortcut } from '@/composables/use-shortcut';
-import { getRootPath } from '@/utils/get-root-path';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { userName } from '@/utils/user-name';
@@ -286,7 +285,7 @@ function triggerSearch({ searchQuery, caretPosition }: { searchQuery: string; ca
 
 function avatarSource(url: string) {
 	if (url === null) return '';
-	return getRootPath() + `assets/${url}?key=system-small-cover`;
+	return `/assets/${url}?key=system-small-cover`;
 }
 
 async function postComment() {
diff --git a/app/src/views/private/components/comment-item-header.vue b/app/src/views/private/components/comment-item-header.vue
index 8956a2e502..da7c4e51a7 100644
--- a/app/src/views/private/components/comment-item-header.vue
+++ b/app/src/views/private/components/comment-item-header.vue
@@ -60,7 +60,6 @@
 </template>
 
 <script setup lang="ts">
-import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
 import format from 'date-fns/format';
 import { computed, ref } from 'vue';
@@ -91,7 +90,7 @@ const formattedTime = computed(() => {
 const avatarSource = computed(() => {
 	if (!props.activity.user?.avatar) return null;
 
-	return getRootPath() + `assets/${props.activity.user.avatar.id}?key=system-small-cover`;
+	return `/assets/${props.activity.user.avatar.id}?key=system-small-cover`;
 });
 
 const { confirmDelete, deleting, remove } = useDelete();
diff --git a/app/src/views/private/components/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar.vue
index dc5957d481..3c23bfcef0 100644
--- a/app/src/views/private/components/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar.vue
@@ -54,7 +54,6 @@
 import { useAppStore } from '@/stores/app';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useUserStore } from '@/stores/user';
-import { getRootPath } from '@/utils/get-root-path';
 import { storeToRefs } from 'pinia';
 import { computed, defineComponent, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -75,7 +74,7 @@ export default defineComponent({
 
 		const avatarURL = computed<string | null>(() => {
 			if (!userStore.currentUser || !('avatar' in userStore.currentUser) || !userStore.currentUser?.avatar) return null;
-			return getRootPath() + `assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`;
+			return `/assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`;
 		});
 
 		const avatarError = ref(null);
diff --git a/app/src/views/private/components/module-bar-logo.vue b/app/src/views/private/components/module-bar-logo.vue
index ee3723ee26..48d5cdf069 100644
--- a/app/src/views/private/components/module-bar-logo.vue
+++ b/app/src/views/private/components/module-bar-logo.vue
@@ -21,7 +21,6 @@
 <script lang="ts">
 import { useRequestsStore } from '@/stores/requests';
 import { useSettingsStore } from '@/stores/settings';
-import { getRootPath } from '@/utils/get-root-path';
 import { computed, defineComponent, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -35,7 +34,7 @@ export default defineComponent({
 		const customLogoPath = computed<string | null>(() => {
 			if (settingsStore.settings === null) return null;
 			if (!settingsStore.settings?.project_logo) return null;
-			return getRootPath() + `assets/${settingsStore.settings.project_logo}`;
+			return '/assets/' + settingsStore.settings.project_logo;
 		});
 
 		const showLoader = ref(false);
diff --git a/app/src/views/private/components/user-popover.vue b/app/src/views/private/components/user-popover.vue
index 15a0ddc816..9c28ea1bd6 100644
--- a/app/src/views/private/components/user-popover.vue
+++ b/app/src/views/private/components/user-popover.vue
@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import api from '@/api';
-import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
 import { User } from '@directus/shared/types';
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue';
@@ -58,7 +57,7 @@ export default defineComponent({
 			if (data.value === null) return null;
 
 			if (data.value.avatar?.id) {
-				return `${getRootPath()}assets/${data.value.avatar.id}?key=system-medium-cover`;
+				return `/assets/${data.value.avatar.id}?key=system-medium-cover`;
 			}
 			return null;
 		});
diff --git a/app/src/views/public/public-view.vue b/app/src/views/public/public-view.vue
index bdb3b6578a..744c0a9c26 100644
--- a/app/src/views/public/public-view.vue
+++ b/app/src/views/public/public-view.vue
@@ -60,7 +60,6 @@
 import { computed } from 'vue';
 import { useServerStore } from '@/stores/server';
 import { storeToRefs } from 'pinia';
-import { getRootPath } from '@/utils/get-root-path';
 import { useI18n } from 'vue-i18n';
 import { cssVar } from '@directus/shared/utils/browser';
 import Color from 'color';
@@ -131,7 +130,7 @@ const hasCustomBackground = computed(() => {
 const artStyles = computed(() => {
 	if (!hasCustomBackground.value) return null;
 
-	const url = getRootPath() + `assets/${info.value!.project?.public_background}`;
+	const url = `/assets/${info.value!.project?.public_background}`;
 
 	return {
 		background: `url(${url})`,
@@ -142,12 +141,12 @@ const artStyles = computed(() => {
 
 const foregroundURL = computed(() => {
 	if (!info.value?.project?.public_foreground) return null;
-	return getRootPath() + `assets/${info.value.project?.public_foreground}`;
+	return '/assets/' + info.value.project?.public_foreground;
 });
 
 const logoURL = computed<string | null>(() => {
 	if (!info.value?.project?.project_logo) return null;
-	return getRootPath() + `assets/${info.value.project?.project_logo}`;
+	return '/assets/' + info.value.project?.project_logo;
 });
 </script>