Merge pull request #21197 from nextcloud/bugfix/noid/app-screenshots

Check if screenshot is available before showing it

apps/settings/src/components/AppDetails.vue

@@ -40,7 +40,7 @@
 			</svg>
 			{{ app.name }}
 		</h2>
-		<img v-if="app.screenshot" :src="app.screenshot" width="100%">
+		<img v-if="screenshotLoaded" :src="app.screenshot" width="100%">
 		<div v-if="app.level === 300 || app.level === 200 || hasRating" class="app-level">
 			<span v-if="app.level === 300"
 				v-tooltip.auto="t('settings', 'This app is supported via your current Nextcloud subscription.')"
@@ -207,6 +207,7 @@ export default {
 	data() {
 		return {
 			groupCheckedAppsData: false,
+			screenshotLoaded: false,
 		}
 	},
 	computed: {
@@ -308,6 +309,13 @@ export default {
 		if (this.app.groups.length > 0) {
 			this.groupCheckedAppsData = true
 		}
+		if (this.app.screenshot) {
+			const image = new Image()
+			image.onload = (e) => {
+				this.screenshotLoaded = true
+			}
+			image.src = this.app.screenshot
+		}
 	},
 }
 </script>

apps/settings/src/components/AppList/AppItem.vue

@@ -23,9 +23,9 @@
 <template>
 	<div class="section" :class="{ selected: isSelected }" @click="showAppDetails">
 		<div class="app-image app-image-icon" @click="showAppDetails">
-			<div v-if="(listView && !app.preview) || (!listView && !app.screenshot)" class="icon-settings-dark" />
+			<div v-if="(listView && !app.preview) || (!listView && !screenshotLoaded)" class="icon-settings-dark" />
 
-			<svg v-if="listView && app.preview"
+			<svg v-else-if="listView && app.preview"
 				width="32"
 				height="32"
 				viewBox="0 0 32 32">
@@ -40,7 +40,7 @@
 					class="app-icon" />
 			</svg>
 
-			<img v-if="!listView && app.screenshot" :src="app.screenshot" width="100%">
+			<img v-if="!listView && app.screenshot && screenshotLoaded" :src="app.screenshot" width="100%">
 		</div>
 		<div class="app-name" @click="showAppDetails">
 			{{ app.name }}
@@ -129,6 +129,7 @@ export default {
 		return {
 			isSelected: false,
 			scrolled: false,
+			screenshotLoaded: false,
 		}
 	},
 	computed: {
@@ -143,6 +144,13 @@ export default {
 	},
 	mounted() {
 		this.isSelected = (this.app.id === this.$route.params.id)
+		if (this.app.screenshot) {
+			const image = new Image()
+			image.onload = (e) => {
+				this.screenshotLoaded = true
+			}
+			image.src = this.app.screenshot
+		}
 	},
 	watchers: {