github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-24 19:47:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

broken assets paths when serving Directus from a subfolder (#14650)

Browse Source 
* removing getrootpath

* removed redundant getRootPath from components

* We use leading / everywhere else in api usage

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Brainslug
2022-07-26 17:29:14 +02:00
committed by GitHub
parent 391992b5b4
commit ef397e97b1
13 changed files with 18 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/displays/file/file.vue
View File

@@ -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);

3
app/src/displays/image/image.vue
View File

@@ -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 };

3
app/src/displays/user/user.vue
View File

@@ -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;

8
app/src/interfaces/file-image/file-image.vue
View File

@@ -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(() => {

3
app/src/interfaces/file/file.vue
View File

@@ -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(() => {

3
app/src/layouts/cards/components/card.vue
View File

@@ -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 };
});

3
app/src/modules/users/routes/item.vue
View File

@@ -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;

3
app/src/views/private/components/comment-input.vue
View File

@@ -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() {

3
app/src/views/private/components/comment-item-header.vue
View File

@@ -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();

3
app/src/views/private/components/module-bar-avatar.vue
View File

@@ -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);

3
app/src/views/private/components/module-bar-logo.vue
View File

@@ -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);

3
app/src/views/private/components/user-popover.vue
View File

@@ -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;
});

7
app/src/views/public/public-view.vue
View File

@@ -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>