diff options
Diffstat (limited to 'src/components/ContactDetails/ContactDetailsAvatar.vue')
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index 1700c8dd..9a1bd3f5 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -32,8 +32,8 @@ @change="processFile"> <!-- Avatar display --> - <div v-if="contact.photo" - :style="{ 'backgroundImage': `url(${contact.photoUrl})` }" + <div v-if="photoUrl" + :style="{ 'backgroundImage': `url(${photoUrl})` }" class="contact-header-avatar__photo" @click="toggleModal" /> <Avatar v-else @@ -136,7 +136,7 @@ <div class="contact-header-modal__photo-wrapper" @click.exact.self="toggleModal"> <img ref="img" - :src="contact.photoUrl" + :src="photoUrl" class="contact-header-modal__photo"> </div> </Modal> @@ -178,11 +178,18 @@ export default { }, }, + watch: { + contact() { + this.loadPhotoUrl() + }, + }, + data() { return { maximizeAvatar: false, opened: false, loading: false, + photoUrl: false, root: generateRemoteUrl(`dav/files/${getCurrentUser().uid}`), } }, @@ -210,6 +217,10 @@ export default { }, }, + mounted() { + this.loadPhotoUrl() + }, + methods: { onLoad() { console.debug(...arguments) @@ -354,6 +365,16 @@ export default { this.loading = false }, + async loadPhotoUrl() { + this.photoUrl = false + const photoUrl = await this.contact.getPhotoUrl() + if (!photoUrl) { + console.warn('contact has an invalid photo') + return + } + this.photoUrl = photoUrl + }, + /** * Toggle the full image preview */ |