feat(admin-ui): Add placeholder to ProductList when no image set

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -44,12 +44,17 @@
         <td class="left align-middle">
             <div class="image-placeholder">
                 <img
-                    [src]="
-                        (groupByProduct
+                    *ngIf="
+                        groupByProduct
                             ? result.productPreview
-                            : result.productVariantPreview || result.productPreview) + '?preset=tiny'
+                            : result.productVariantPreview || result.productPreview as image;
+                        else: imagePlaceholder
                     "
+                    [src]="image + '?preset=tiny'"
                 />
+                <ng-template #imagePlaceholder>
+                    <div class="placeholder"><clr-icon shape="image" size="48"></clr-icon></div>
+                </ng-template>
             </div>
         </td>
         <td class="left align-middle">

admin-ui/src/app/catalog/components/product-list/product-list.component.scss

@@ -4,6 +4,10 @@
     width: 50px;
     height: 50px;
     background-color: $color-grey-2;
+    .placeholder {
+        text-align: center;
+        color: $color-grey-3;
+    }
 }
 .search-form {
     display: flex;