离子2 - 显示加载原始图像之前的默认图像

时间:2017-06-10 16:09:54

标签: angular ionic2

离子2应用程序中的

我创建了一个列表,每个列表项都有一个图像,我

想要在加载原始图像之前显示默认图像,我想要这样的托盘:

<div id="list-container">
  <ul class="list-group" id="messages-list">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
    <li class="list-group-item">Fifth item</li>
    <li class="list-group-item">Sixth item</li>
    <li class="list-group-item">Seventh item</li>
    <li class="list-group-item">Eighth item</li>
    <li class="list-group-item">Nineth item</li>
  </ul>
</div>
<textarea id="message"></textarea>

但在初始化为undefine

时加载了默认图像标记中的var

1 个答案:

答案 0 :(得分:2)

我在默认的img标签中使用add(load)来解决它:

<img  src="./assets/img/pre.png" alt="" (load)="loaded = false" [hidden]="loaded">

并使用如下:

<!--Item 1-->
  <div *ngFor="let c of category" class="list_item"  (click)="goToCategory(c.id,c.title)">
    <img  src="./assets/img/default.png"  (load)="loaded = false" [hidden]="loaded">
    <img   [src]="c.img"  (load)="loaded = true"  alt="" >
    <div class="band_item">
      <h5 class="persian">{{c.title}}</h5>
      <span class="persian">{{c.description}}</span>
    </div>
  </div>