ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Use background image instead of img

This commit is contained in:
Christian Cueni 2019-04-24 17:06:11 +02:00
parent aca8bd0d2d
commit 1da5c4bb29
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/components/profile/Avatar.vue
View File

@ -4,8 +4,9 @@
<user-icon v-show="!isAvatarLoaded" class="avatar__placeholder" :class="{'avatar__placeholder--highlighted': iconHighlighted}"></user-icon> <user-icon v-show="!isAvatarLoaded" class="avatar__placeholder" :class="{'avatar__placeholder--highlighted': iconHighlighted}"></user-icon>
</transition> </transition>
<transition name="show"> <transition name="show">
<img v-show="isAvatarLoaded" class="avatar__image" :class="{'avatar__image--landscape': landscape}" :src="avatarUrl" ref="avatarImage" /> <div v-show="isAvatarLoaded" class="avatar__image" ref="avatarImage" :style="{'background-image': `url(${this.avatarUrl})`}"></div>
</transition> </transition>
<img class="avatar__fake-image" :src="avatarUrl" ref="fakeImage"/>
</div> </div>
</template> </template>
@ -18,14 +19,13 @@
components: {UserIcon}, components: {UserIcon},
data () { data () {
return { return {
isAvatarLoaded: false, isAvatarLoaded: false
landscape: false
} }
}, },
mounted () { mounted () {
if (this.avatarUrl !== '') { if (this.avatarUrl !== '') {
this.$refs.avatarImage.addEventListener('load', () => { this.$refs.fakeImage.addEventListener('load', () => {
this.landscape = this.$refs.avatarImage.naturalHeight < this.$refs.avatarImage.naturalWidth; this.$refs.fakeImage.remove();
this.isAvatarLoaded = true; this.isAvatarLoaded = true;
}); });
}; };
@ -44,8 +44,6 @@
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
// clip-path: circle(40%);
position: relative;
&__placeholder { &__placeholder {
height: $max-width; height: $max-width;
@ -57,19 +55,31 @@
} }
&__image { &__image {
position: absolute;
width: $max-width;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&--landscape { background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
border: 0;
// position: absolute;
// width: $max-width;
// height: auto;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
&--landscape {
width: auto; width: auto;
height: $max-width; height: $max-width;
} }
} }
&__fake-image {
width: 0;
height: 0;
}
.fade-leave-active, .show-enter-active { .fade-leave-active, .show-enter-active {
transition: opacity .5s; transition: opacity .5s;
} }