Question

我有一个离子2项目，我正在使用ng-lazyload-image。我的问题是，当我滚动屏幕时，图像没有显示，但我可以在网络中看到它们被下载，所以可能我的滚动事件没有被触发。

这是我的页面HTML代码：

<ion-header>
  <ion-navbar>
    <ion-title>Profile</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="profileInfo" [hidden]="!dataLoaded" id="container" padding>
  <div class="profileDetails">
    <div *ngIf="showSection === 'following'">
      Following
    </div>
    <div *ngIf="showSection === 'followers'">
      Followers
    </div>
    <div *ngIf="showSection === 'my-stories'">
        <story-summary *ngFor="let story of myStories" [story]="story" (click)="readStory(story)"></story-summary>
    </div>
    <div *ngIf="showSection === 'saved-stories'">
      <story-summary *ngFor="let story of savedStories" [story]="story"></story-summary>
    </div>
    <div *ngIf="showSection === 'draft-stories'">
      <story-summary *ngFor="let story of dradtStories" [story]="story"></story-summary>
    </div>
  </div>


</ion-content>

summary-component.ts文件：

import { NavController } from 'ionic-angular';
import { Component, Input, ElementRef, ChangeDetectionStrategy } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Story } from "../story.model";
import { Profile } from "../../user/profile/profile.model";
import { ReadStoryPage } from "../../../pages/story/read/read";

@Component({
  selector: 'story-summary',
  templateUrl: 'summary.component.html'
})
export class StorySummaryComponent {

  @Input() story: Story = <Story>{ user: <Profile>{} };

  private lazyLoadingImage = "assets/img/spinner-loading.gif";

    constructor(private _DomSanitizer: DomSanitizer, 
               private navCtrl: NavController,
               private elmRef: ElementRef) 
    { }

    getProfilePicture() {
      let image: any = 'assets/img/avatar-black.png';
      if (this.story.user) {
        if (this.story.user.mapporiaImage) {
          image = this._DomSanitizer.bypassSecurityTrustUrl(this.story.user.mapporiaImage);
        } else if (this.story.user.facebookImage) {
          image = this._DomSanitizer.bypassSecurityTrustUrl(this.story.user.facebookImage);
        }
      }
      return image;
    }

    getUsername() {
      let username = 'unknown';
      if (this.story.user && this.story.user.nickName) {
        username = this.story.user.nickName;
      }
      return username;
    }

    getRating() {
      let rating;
      if (this.story.rating) {
        // TODO: calculate story rating
      }
      return rating;
    }
}

summary.component.ts的HTML：

<div class="story">
    <img [src]="getProfilePicture()" alt="Alt text" id="profile-picture" />
    <span>{{getUsername()}}</span>
    <span>{{story.location}}</span>
    <span>{{story.time}}</span>
    <span>{{getRating()}}</span>
    <span>{{story.subject}}</span>
    <div *ngFor="let image of story.images">
        <div>
            <img [src]="lazyLoadingImage"
                 [lazyLoad]="image"
                 [offset]="500"
                 [scrollObservable]="container"
                 class="thumnails"     
                 alt="Story Image"
                 id="story-image" />
        </div>
    </div>
</div>

我还从git下载了示例，并尝试修改我的代码，但仍然无法使其工作。图像加载在页面顶部，旋转器在这里，但是当我滚动屏幕时，旋转器不会被图像替换，图像会下载。

日Thnx

Answer 1

尝试更改src的{{1}}，例如：

defaultImage

离子2

1 个答案: