implement image error handling to display 'no-image.png' on missing image

Wonky.Client/Components/CustomerInventoryListComponent.razor

@@ -58,7 +58,9 @@
                         <div class="col-sm-2">
                             <div class="position-relative">
                                 <div class="product-image">
-                                    <img class="img-fluid img-thumbnail" src="@product.PictureLink?height=100" alt="@product.Description"/>
+                                    <img class="img-fluid img-thumbnail" src="@product.PictureLink?height=100"
+                                         onerror="this.onerror=null;this.src='https://assets.innotec.dk/images/no-image.png?height=100'"
+                                         alt="@product.Description"/>
                                 </div>
                                 @if (product.Discontinued)
                                 {

Wonky.Client/Components/CustomerProductCheckListComponent.razor

@@ -69,6 +69,9 @@
                             @product.Quantity
                         </div>
                         <div class="col-sm-2">
+                            <img class="img-fluid img-thumbnail" src="@product.PictureLink?height=100" 
+                                 onerror="this.onerror=null;this.src='https://assets.innotec.dk/images/no-image.png?height=100'" 
+                                 alt="@product.Description"/>
                         </div>
                         <div class="col-sm-1" @onclick="@(() => ProductCheck(product.Sku))">
                             <input type="checkbox" class="btn-check" id="btn-@product.Sku.Replace(",", "")" autocomplete="off"/>

Wonky.Client/Components/PrintCatalogComponent.razor

@@ -31,6 +31,7 @@
             </th>
         </tr>
         <tr class="bg-black text-white opacity-75">
+            <th scope="col"></th>
             <th scope="col">Navn</th>
             <th scope="col">Fork</th>
             <th scope="col" class="text-nowrap">Varenr</th>
@@ -41,6 +42,12 @@
         @foreach (var salesItem in ItemList)
         {
             <tr>
+                <td>
+                    <img class="img-fluid img-thumbnail" 
+                         src="@salesItem.PictureLink?height=100"
+                         onerror="this.onerror=null;this.src='https://assets.innotec.dk/images/no-image.png?height=100'"
+                         alt="@salesItem.Name"/>
+                </td>
                 <td class="align-middle">
                     @salesItem.Name
                 </td>

Wonky.Client/Components/ProductPriceListComponent.razor

@@ -19,6 +19,7 @@
     <table class="table table-hover table-striped justify-content-center">
         <thead>
         <tr class="bg-black text-white opacity-75">
+            <th scope="col"></th>
             <th scope="col">Navn</th>
             <th scope="col">Fork</th>
             <th scope="col" class="text-nowrap">Varenr</th>
@@ -30,6 +31,11 @@
         @foreach (var salesItem in ItemList)
         {
             <tr>
+                <td>
+                    <img class="img-fluid img-thumbnail" src="@(salesItem.PictureLink)?height=100" 
+                         onerror="this.onerror=null;this.src='https://assets.innotec.dk/images/no-image.png?height=100'"
+                         alt="@salesItem.Name"/>
+                </td>
                 <td class="align-middle">
                     @salesItem.Name
                 </td>
@@ -42,13 +48,13 @@
                 </td>
                 <td class="align-middle">
                     <ul class="list-group">
-                    @foreach (var rate in salesItem.Rates)
-                    {
-                        <li class="list-group-item d-flex justify-content-between align-items-end">
-                            <div class="pe-2">@rate.Quantity</div>
-                            <div class="text-end pe-2">@rate.Rate</div>
-                        </li>
-                    }
+                        @foreach (var rate in salesItem.Rates)
+                        {
+                            <li class="list-group-item d-flex justify-content-between align-items-end">
+                                <div class="pe-2">@rate.Quantity</div>
+                                <div class="text-end pe-2">@rate.Rate</div>
+                            </li>
+                        }
                     </ul>
                 </td>
             </tr>

Wonky.Client/wwwroot/appsettings.json

@@ -1,7 +1,7 @@
 {
     "appInfo": {
         "name": "Wonky Online",
-        "version": "183.0",
+        "version": "185.0",
         "rc": true,
         "sandBox": true,
         "image": "grumpy-coder.png",