Merge pull request #395 from GDGAhmedabad/feat/add-user-placeholder-i…

…mage [Update] show user placeholder if no image url exist
GDGAhmedabad · Nov 10, 2024 · c2759bf · c2759bf
2 parents 0bd0fec + 6b80a9a
commit c2759bf
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/public/images/user-placeholder.png b/public/images/user-placeholder.png
diff --git a/src/pages/meet-the-talent-detail.ts b/src/pages/meet-the-talent-detail.ts
@@ -67,11 +67,19 @@ export class MeetTheTalentDetail extends ReduxMixin(PolymerElement) {
         font-color="[[heroSettings.fontColor]]"
       >
         <div class="dialog-container header-content" layout horizontal center>
-          <lazy-image
-            class="photo"
-            src="[[talentDetails.imageUrl]]"
-            alt="[[talentDetails.fullName]]">
-          </lazy-image>
+          <template is="dom-if" if="[[talent.imageUrl]]">
+            <lazy-image
+              class="photo"
+              src="[[talentDetails.imageUrl]]"
+              alt="[[talentDetails.fullName]]">
+            </lazy-image>
+          </template>
+          <template is="dom-if" if="[[!talent.imageUrl]]">
+            <lazy-image
+              class="photo"
+              src="/images/user-placeholder.png"
+            ></lazy-image>
+          </template>
           <div>
             <h2 class="name" flex>
               [[talentDetails.fullName]]

diff --git a/src/pages/meet-the-talent-page.ts b/src/pages/meet-the-talent-page.ts
@@ -137,6 +137,12 @@ export class MeetTheTalentPage extends ReduxMixin(PolymerElement) {
                 alt="[[talent.fullName]]"
               ></lazy-image>
             </template>
+            <template is="dom-if" if="[[!talent.imageUrl]]">
+              <lazy-image
+                class="photo"
+                src="/images/user-placeholder.png"
+              ></lazy-image>
+            </template>
             <div class="description">
               <h2 class="name">[[talent.fullName]]</h2>
               <div class="origin">[[talent.location]]</div>