Add fallback when a there is no preview for a version

Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 14 insertions, 3 deletions

diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index b5c4cbf2c4c..b617ecc90dc 100644
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -23,12 +23,15 @@
 			:force-display-actions="true"
 			data-files-versions-version>
 			<template #icon>
-				<img lazy="true"
+				<img v-if="!previewError"
 					:src="previewURL"
 					alt=""
-					height="256"
-					width="256"
+					class="version__image"
+					@error="previewError = true">
+				<div v-else
 					class="version__image">
+					<ImageOffOutline :size="20" />
+				</div>
 			</template>
 			<template #subtitle>
 				<div class="version__info">
@@ -112,6 +115,7 @@ import Download from 'vue-material-design-icons/Download.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
+import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue'
 import { NcActionButton, NcActionLink, NcListItem, NcModal, NcButton, NcTextField, Tooltip } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import { translate } from '@nextcloud/l10n'
@@ -133,6 +137,7 @@ export default {
 		Pencil,
 		Check,
 		Delete,
+		ImageOffOutline,
 	},
 	directives: {
 		tooltip: Tooltip,
@@ -177,6 +182,7 @@ export default {
 			showVersionLabelForm: false,
 			formVersionLabelValue: this.version.label,
 			capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
+			previewError: false,
 		}
 	},
 	computed: {
@@ -277,6 +283,11 @@ export default {
 		height: 3rem;
 		border: 1px solid var(--color-border);
 		border-radius: var(--border-radius-large);
+
+		// Useful to display no preview icon.
+		display: flex;
+		justify-content: center;
+		color: var(--color-text-light);
 	}
 }