implement image error handling to display 'no-image.png' on missing image
This commit is contained in:
parent
e2e528430b
commit
2c6665ecf1
6 changed files with 27 additions and 9 deletions
|
@ -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)
|
||||||
{
|
{
|
||||||
|
|
|
@ -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"/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue