software caching thumbnails in javascript

web/src/views/Empty.vue

@@ -4,9 +4,16 @@
             <div class="col-xl-8 offset-xl-2">
                 <div class="card bg-dark text-light mb-2" id="filters">
                     <div class="card-header">
-                        <h3 class="text-center">User: {{user}}</h3>
+                        <h3 class="text-center">User: {{ activeUser }}</h3>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body" v-if="hasPermissions">
+                        <p>Your Account is activated. Got to
+                            <router-link :to="{name: 'items', params: {event: getEventSlug}}">Items</router-link>
+                            or
+                            <router-link :to="{name: 'tickets', params: {event: getEventSlug}}">Tickets</router-link>
+                        </p>
+                    </div>
+                    <div class="card-body" v-else>
                         <p>Your Account is not yet activated. Please contact an admin.</p>
                     </div>
                 </div>
@@ -16,11 +23,13 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 export default {
     name: 'Empty',
-    computed: mapState(['user']),
+    computed: {
+        ...mapGetters(['hasPermissions', 'getEventSlug', 'activeUser']),
+    },
 };
 </script>
 

web/src/views/Items.vue

@@ -45,7 +45,7 @@
             v-slot="{ item }"
             @itemActivated="openLightboxModalWith($event)"
         >
-            <AuthenticatedImage v-if="item.file"
+            <AuthenticatedImage v-if="item.file" cached
                                 :src="`/media/2/256/${item.file}/`"
                                 class="card-img-top img-fluid"
             />