Correctly fallback in case of missing data

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 18 insertions, 4 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
index 1b7a0e1b0..efc3f1e34 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
@@ -26,12 +26,15 @@
 		:aria-label="contactAriaLabel"
 		target="_blank">
 		<img v-if="contactPhotoFromBase64"
-			class="contact__image"
+			:class="{
+				'contact__image': contactHasPhoto,
+				'contact__icon': !contactHasPhoto,
+			}"
 			alt=""
 			:src="contactPhotoFromBase64">
 		<div class="contact__lineone">
 			<div class="title">
-				{{ contactName }}
+				{{ displayName }}
 			</div>
 		</div>
 	</a>
@@ -75,12 +78,18 @@ export default {
 	},
 
 	computed: {
+		contactHasPhoto() {
+			return this.contactPhotoMimetype && this.contactPhoto
+		},
 		contactPhotoFromBase64() {
-			if (!this.contactPhotoMimetype || !this.contactPhoto) {
-				return null
+			if (!this.contactHasPhoto) {
+				return OC.MimeType.getIconUrl('text/vcard')
 			}
 			return 'data:' + this.contactPhotoMimetype + ';base64,' + this.contactPhoto
 		},
+		displayName() {
+			return this.contactName || this.name
+		},
 		contactAriaLabel() {
 			return t('spreed', 'Contact')
 		},
@@ -111,6 +120,11 @@ export default {
 			max-width: 44px;
 			max-height: 44px;
 		}
+		&__icon {
+			display: inline-block;
+			width: 44px;
+			height: 44px;
+		}
 		&__lineone {
 			height: 30px;
 			display: flex;