UI Fixes part III.

resources/js/components/FilePreview/Media/ImageFile.vue

@@ -1,18 +1,37 @@
 <template>
-    <img id="printable-file" class="file" :class="{ 'file-shadow': !$isMobile() }" :src="imageSource" />
+    <img id="printable-file" class="file" :class="{'file-shadow': !$isMobile()}" :src="src" @error="replaceByOriginal" />
 </template>
 
 <script>
 export default {
     name: 'ImageFile',
     props: ['file'],
-    computed: {
-        imageSource() {
-            let windowWidth = window.innerWidth
+	watch: {
+		'file': function () {
+			this.getSrc()
+		}
+	},
+	data() {
+		return {
+			src: undefined,
+		}
+	},
+	methods: {
+		replaceByOriginal() {
+			this.src = this.file.data.attributes.file_url
+		},
+		getSrc() {
+			let windowWidth = window.innerWidth
 
-            if (windowWidth > 1280) return this.file.data.attributes.thumbnail.xl
-            else return this.file.data.attributes.thumbnail.lg
-        },
-    },
+			if (windowWidth > 1280) {
+				this.src = this.file.data.attributes.thumbnail.xl
+			} else {
+				this.src = this.file.data.attributes.thumbnail.lg
+			}
+		}
+	},
+	created() {
+		this.getSrc()
+	}
 }
 </script>