frontend/src/consts/routeNames.ts

@@ -1,5 +1,6 @@
 export const ROUTE_NAMES = {
     Upload: 'Upload',
     Viewer: 'Viewer',
+    HotlinkViewer: 'HotlinkViewer',
     Delete: 'Delete'
 } as const;

frontend/src/router/index.ts

@@ -8,19 +8,25 @@ const router = createRouter({
             path: '/',
             name: ROUTE_NAMES.Upload,
             component: () => import('@/views/UploadView.vue'),
-            meta: { title: 'Private Image — Upload' }
+            meta: { title: 'Private Image - Upload' }
         },
         {
             path: '/v/:id',
             name: ROUTE_NAMES.Viewer,
             component: () => import('@/views/ViewerView.vue'),
-            meta: { title: 'Private Image — Viewer' }
+            meta: { title: 'Private Image - Viewer' }
+        },
+        {
+            path: '/h/:id/:secret',
+            name: ROUTE_NAMES.HotlinkViewer,
+            component: () => import('@/views/HotlinkViewerView.vue'),
+            meta: { title: 'Private Image - Viewer' }
         },
         {
             path: '/d/:id',
             name: ROUTE_NAMES.Delete,
             component: () => import('@/views/DeleteView.vue'),
-            meta: { title: 'Private Image — Delete' }
+            meta: { title: 'Private Image - Delete' }
         }
     ]
 });

frontend/src/views/HotlinkViewerView.vue

@@ -0,0 +1,24 @@
+<template>
+    <main class="flex min-h-screen items-center justify-center p-4">
+        <img v-if="imageSrc" :src="imageSrc" class="max-h-[80vh] max-w-full object-contain" />
+    </main>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { buildHotlinkImagePath } from '@/utils/share/buildHotlinkImagePath';
+
+const route = useRoute();
+
+const imageSrc = computed((): string | null => {
+    const uploadId = route.params.id;
+    const secret = route.params.secret;
+
+    if (typeof uploadId !== 'string' || typeof secret !== 'string' || !uploadId || !secret) {
+        return null;
+    }
+
+    return buildHotlinkImagePath(uploadId, secret);
+});
+</script>