stash

core/files/media_v2.py

@@ -39,10 +39,14 @@ def thumbnail_urls(request, size, hash):
             from PIL import Image
             image = Image.open(file.file)
             image.thumbnail((size, size))
-            image.save(MEDIA_ROOT + f'/media/thumbnails/{size}/{hash_path}', quality=90)
+            rgb_image = image.convert('RGB')
+            thumb_dir = os.path.dirname(MEDIA_ROOT + f'/thumbnails/{size}/{hash_path}')
+            if not os.path.exists(thumb_dir):
+                os.makedirs(thumb_dir)
+            rgb_image.save(MEDIA_ROOT + f'/thumbnails/{size}/{hash_path}', 'jpeg', quality=90)
 
         return HttpResponse(status=status.HTTP_200_OK,
-                            content_type=file.mime_type,
+                            content_type="image/jpeg",
                             headers={
                                 'X-Accel-Redirect': f'/redirect_thumbnail/{size}/{hash_path}',
                                 'Access-Control-Allow-Origin': '*',

web/src/components/AuthenticatedImage.vue

@@ -0,0 +1,39 @@
+<template>
+    <img :src="image_data" :alt="src">
+</template>
+
+<style scoped>
+</style>
+
+<script>
+
+import {mapActions} from "vuex";
+
+export default {
+    name: "AuthenticatedImage",
+    props: {
+        src: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+        return {
+            image_data: "",
+            servers: []
+        }
+    },
+    methods: mapActions(['fetchImage']),
+    async mounted() {
+        try {
+            const response = await this.fetchImage(this.src);
+            const mime_type = response.headers.get("content-type");
+            const base64 = btoa(new Uint8Array(await response.arrayBuffer())
+                .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+            this.image_data = "data:" + mime_type + ";base64," + base64;
+        } catch (e) {
+            console.log(e);
+        }
+    }
+}
+</script>

web/src/components/Lightbox.vue

@@ -1,12 +1,12 @@
 <template>
     <Modal @close="$emit('close')">
         <template #body>
-            <img
+            <AuthenticatedImage
                 class="img-fluid rounded mx-auto d-block mb-3 w-100"
                 :src="`/media/2/${file}/`"
                 alt="Image not available."
                 id="lightbox-image"
-            >
+            />
         </template>
         <template #buttons>
             <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>

web/src/store/index.js

@@ -202,10 +202,13 @@ const store = new Vuex.Store({
             store.commit('logout');
             router.push('/login');
         },
-        async afterLogin() {
-            await store.dispatch('loadBoxes');
-            await store.dispatch('loadEventItems');
-            await store.dispatch('loadTickets');
+        async afterLogin({dispatch}) {
+            await dispatch('loadBoxes');
+            await dispatch('loadEventItems');
+            await dispatch('loadTickets');
+        },
+        async fetchImage({state}, url) {
+            return await fetch(url, {headers: {'Authorization': `Token ${state.token}`}}).then(r => r.blob());
         },
         async loadEvents({commit}) {
             const {data} = await axios.get('/2/events/');

web/src/views/Items.vue

@@ -44,10 +44,10 @@
             v-slot="{ item }"
             @itemActivated="openLightboxModalWith($event)"
         >
-            <img
-                :src="`/media/2/200/${item.file}/`"
+            <AuthenticatedImage
+                :src="`/media/2/256/${item.file}/`"
                 class="card-img-top img-fluid"
-            >
+            />
             <div class="card-body">
                 <h6 class="card-title">{{ item.description }}</h6>
                 <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
@@ -76,6 +76,7 @@ import Modal from '@/components/Modal';
 import EditItem from '@/components/EditItem';
 import {mapActions, mapState} from 'vuex';
 import Lightbox from '../components/Lightbox';
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 
 export default {
     name: 'Items',
@@ -83,7 +84,7 @@ export default {
         lightboxItem: null,
         editingItem: null,
     }),
-    components: {Lightbox, Table, Cards, Modal, EditItem},
+    components: {AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
     computed: mapState(['loadedItems', 'layout']),
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned']),