view other user without image - display default image

Author: supalarry

frontend/src/components/app/users/User.vue

@@ -7,7 +7,7 @@
         <h1 class="noSelect">←</h1>
       </div>
       <div v-if="user" class="md:flex md:items-start">
-        <UserImages v-bind:images="user.images" class="md:w-7/12 md:order-2 sm:rounded-t md:rounded-r-md md:rounded-l-none"></UserImages>
+        <UserImages v-bind:images="user.images" v-bind:gender="user.gender" class="md:w-7/12 md:order-2 sm:rounded-t md:rounded-r-md md:rounded-l-none"></UserImages>
         <UserProfile class="md:w-5/12 md:order-1 md:overflow-scroll md:border-b md:border-l md:rounded-l-md" v-bind:user="user"></UserProfile>
       </div>
     </section>

frontend/src/components/app/users/UserImages.vue

@@ -1,6 +1,4 @@
 <template>
-  <!-- eslint-disable max-len-->
-  <!--      v-for="(image, index) in this.images" :key="image.id"-->
   <div
     class="relative image-height"
     v-bind:style="{
@@ -38,8 +36,12 @@
 </template>
 
 <script>
+import imageMan from '../../../assets/recommendations/avatars/man1.png';
+import imageWoman from '../../../assets/recommendations/avatars/woman1.png';
+import imageOther from '../../../assets/recommendations/avatars/other.png';
+
 export default {
-  props: ['images'],
+  props: ['images', 'gender'],
   data: () => ({
     currentImage: 0,
     imagesCount: 0,
@@ -59,7 +61,16 @@ export default {
       this.currentImage = index;
     },
     getImage() {
-      return this.images[this.currentImage].link;
+      if (this.images.length) {
+        return this.images[this.currentImage].link;
+      }
+      if (this.gender === 'male') {
+        return imageMan;
+      }
+      if (this.gender === 'female') {
+        return imageWoman;
+      }
+      return imageOther;
     },
   },
   beforeMount() {