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

This commit is contained in:
Frede Hundewadt 2023-07-23 08:05:42 +02:00
parent e2e528430b
commit 2c6665ecf1
6 changed files with 27 additions and 9 deletions

View file

@ -58,7 +58,9 @@
<div class="col-sm-2"> <div class="col-sm-2">
<div class="position-relative"> <div class="position-relative">
<div class="product-image"> <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> </div>
@if (product.Discontinued) @if (product.Discontinued)
{ {

View file

@ -69,6 +69,9 @@
@product.Quantity @product.Quantity
</div> </div>
<div class="col-sm-2"> <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>
<div class="col-sm-1" @onclick="@(() => ProductCheck(product.Sku))"> <div class="col-sm-1" @onclick="@(() => ProductCheck(product.Sku))">
<input type="checkbox" class="btn-check" id="btn-@product.Sku.Replace(",", "")" autocomplete="off"/> <input type="checkbox" class="btn-check" id="btn-@product.Sku.Replace(",", "")" autocomplete="off"/>

View file

@ -31,6 +31,7 @@
</th> </th>
</tr> </tr>
<tr class="bg-black text-white opacity-75"> <tr class="bg-black text-white opacity-75">
<th scope="col"></th>
<th scope="col">Navn</th> <th scope="col">Navn</th>
<th scope="col">Fork</th> <th scope="col">Fork</th>
<th scope="col" class="text-nowrap">Varenr</th> <th scope="col" class="text-nowrap">Varenr</th>
@ -41,6 +42,12 @@
@foreach (var salesItem in ItemList) @foreach (var salesItem in ItemList)
{ {
<tr> <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"> <td class="align-middle">
@salesItem.Name @salesItem.Name
</td> </td>

View file

@ -19,6 +19,7 @@
<table class="table table-hover table-striped justify-content-center"> <table class="table table-hover table-striped justify-content-center">
<thead> <thead>
<tr class="bg-black text-white opacity-75"> <tr class="bg-black text-white opacity-75">
<th scope="col"></th>
<th scope="col">Navn</th> <th scope="col">Navn</th>
<th scope="col">Fork</th> <th scope="col">Fork</th>
<th scope="col" class="text-nowrap">Varenr</th> <th scope="col" class="text-nowrap">Varenr</th>
@ -30,6 +31,11 @@
@foreach (var salesItem in ItemList) @foreach (var salesItem in ItemList)
{ {
<tr> <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"> <td class="align-middle">
@salesItem.Name @salesItem.Name
</td> </td>
@ -42,13 +48,13 @@
</td> </td>
<td class="align-middle"> <td class="align-middle">
<ul class="list-group"> <ul class="list-group">
@foreach (var rate in salesItem.Rates) @foreach (var rate in salesItem.Rates)
{ {
<li class="list-group-item d-flex justify-content-between align-items-end"> <li class="list-group-item d-flex justify-content-between align-items-end">
<div class="pe-2">@rate.Quantity</div> <div class="pe-2">@rate.Quantity</div>
<div class="text-end pe-2">@rate.Rate</div> <div class="text-end pe-2">@rate.Rate</div>
</li> </li>
} }
</ul> </ul>
</td> </td>
</tr> </tr>

View file

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