refactor: Fix blocked images

src/components/MatchdFileView.vue

@@ -3,7 +3,12 @@
     <ul class="matchd-file-view__list">
       <li v-for="file in files" :key="file.id" class="matchd-file-view__item flex items-center">
         <template v-if="file.mimeType.indexOf('image/') > -1">
-          <img :src="getImageUrlWithStack(file.url)" class="w-40 h-40 border-r" alt="Bild" />
+          <StackImage
+            :url="file.url"
+            stack="desktop-square"
+            class="w-40 h-40 border-r"
+            alt="Bild"
+          />
         </template>
         <template v-else-if="file.mimeType.indexOf('video/') > -1">
           <div class="px-8">
@@ -61,6 +66,7 @@ import Loading from "@/assets/icons/loading.svg";
 import MatchdButton from "@/components/MatchdButton.vue";
 import { QueuedFile } from "@/store/modules/upload/state";
 import { Options, prop, Vue } from "vue-class-component";
+import StackImage from "./StackImage.vue";
 
 class Props {
   files = prop<Attachment[]>({});
@@ -72,6 +78,7 @@ class Props {
     MatchdButton,
     Loading,
     ErrorIcon,
+    StackImage,
   },
   emits: ["deleteFile"],
 })

src/components/StackImage.vue

@@ -0,0 +1,24 @@
+<template>
+  <img :src="src" />
+</template>
+
+<script lang="ts">
+import fetchAttachmentDataUri from "@/helpers/fetchAttachmentDataUri";
+import { prop, Vue } from "vue-class-component";
+import { Watch } from "vue-property-decorator";
+
+class Props {
+  url = prop<string>({ required: true });
+  stack = prop<string>({ required: true });
+}
+export default class EditLink extends Vue.with(Props) {
+  src: string = "";
+
+  @Watch("url", { immediate: true })
+  async fetchUrl() {
+    this.src = await fetchAttachmentDataUri(this.url, this.stack);
+  }
+}
+</script>
+
+<style lang="postcss" scoped></style>

src/components/dashboard/StudentDashboard.vue

@@ -4,9 +4,10 @@
       class="bg-student-gradient-t-b text-white p-9 flex flex-col border-b xl:border-b-0 xl:border-r border-green-1"
     >
       <div class="flex justify-center m-5 lg:m-20 lg:w-86 lg:h-86">
-        <img
+        <StackImage
           class="avatar rounded-full object-cover"
-          :src="replaceStack(avatar.url, 'avatar')"
+          :url="avatar.url"
+          stack="avatar"
           :alt="`${user?.firstName} Profilbild`"
         />
       </div>
@@ -165,8 +166,8 @@ import MatchdButton from "@/components/MatchdButton.vue";
 import MatchdFileUpload from "@/components/MatchdFileUpload.vue";
 import MatchdFileView from "@/components/MatchdFileView.vue";
 import ProfileSection from "@/components/ProfileSection.vue";
-import { replaceStack } from "@/helpers/replaceStack";
 import { Options, prop, Vue } from "vue-class-component";
+import StackImage from "../StackImage.vue";
 
 class Props {
   dashboard = prop<Dashboard>({ required: true });
@@ -181,6 +182,7 @@ class Props {
     MatchdFileView,
     ProfileSection,
     CompanyMatchGroup,
+    StackImage,
   },
 })
 export default class StudentDashboard extends Vue.with(Props) {
@@ -207,10 +209,6 @@ export default class StudentDashboard extends Vue.with(Props) {
       undefined
     );
   }
-
-  replaceStack(url: string, stack: string) {
-    return replaceStack(url, stack);
-  }
 }
 </script>
 

src/helpers/fetchAttachmentDataUri.ts

@@ -0,0 +1,12 @@
+import type { Attachment } from "@/api/models/types";
+import { useStore } from "@/store";
+
+export default async function fetchAttachmentDataUri(url: Attachment["url"], stack: string) {
+  const store = useStore();
+  const result = await fetch(url.replace("{stack}", stack), {
+    headers: {
+      authorization: `JWT ${store.getters["accessToken"]}`,
+    },
+  });
+  return URL.createObjectURL(await result.blob());
+}

src/views/StudentProfile.vue

@@ -7,11 +7,12 @@
       class="bg-student-gradient-t-b text-white p-9 flex flex-col border-b xl:border-b-0 xl:border-r border-green-1"
     >
       <div v-if="avatarSrc" class="flex justify-center mt-9">
-        <img
+        <StackImage
           class="avatar rounded-full object-cover"
           width="300"
           height="300"
-          :src="replaceStack(avatarSrc, 'avatar')"
+          :url="avatarSrc"
+          stack="avatar"
           :alt="`Profilbild von ${user.firstName} ${user.lastName}`"
         />
       </div>
@@ -109,21 +110,21 @@
 </template>
 
 <script lang="ts">
-import type { User } from "@/api/models/types";
 import { AttachmentKey, DateMode } from "@/api/models/types";
 import ArrowDown from "@/assets/icons/arrow-down.svg";
 import ProfileSection from "@/components/ProfileSection.vue";
 import { calculateMargins } from "@/helpers/calculateMargins";
 import { formatDate } from "@/helpers/formatDate";
-import { replaceStack } from "@/helpers/replaceStack";
 import { ParamStrings } from "@/router/paramStrings";
 import { ActionTypes as UploadActionTypes } from "@/store/modules/upload/action-types";
 import { Options, Vue } from "vue-class-component";
+import StackImage from "../components/StackImage.vue";
 
 @Options({
   components: {
     ProfileSection,
     ArrowDown,
+    StackImage,
   },
 })
 export default class StudentProfile extends Vue {
@@ -171,10 +172,6 @@ export default class StudentProfile extends Vue {
     }
   }
 
-  replaceStack(url: string, stack: string) {
-    return replaceStack(url, stack);
-  }
-
   getStepName(step: number) {
     return `${ParamStrings.STEP}${step}`;
   }

src/views/profile/student/StudentStep5.vue

@@ -20,11 +20,10 @@
             @click-nickname="onClickNickname"
           /></div
       ></template>
-
-      <template v-else #info
-        >Du kannst dein Profil anonym oder öffentlich nutzen. Willst du anonym bleiben, zeigen wir
-        diesen Nickname an.</template
-      >
+      <template v-else #info>
+        Du kannst dein Profil anonym oder öffentlich nutzen. Willst du anonym bleiben, zeigen wir
+        diesen Nickname an.
+      </template>
     </MatchdField>
     <MatchdFileBlock>
       <template #label>Dein Profilbild</template>
@@ -38,10 +37,12 @@
       <MatchdFileUpload
         v-if="studentAvatar.length === 0"
         :upload-configuration="studentAvatarUploadConfigurations"
+        :formal="true"
         class="mb-10"
         @select-files="onSelectStudentAvatar"
-        >Bild hochladen</MatchdFileUpload
       >
+        Bild hochladen
+      </MatchdFileUpload>
     </MatchdFileBlock>
     <template v-if="edit">
       <teleport to="footer">