在对图像应用延迟加载后,在ionic3中重新加载页面后出现上述错误?
我采取的步骤:
运行Npm:npm install ng2-lazyload-image --save`
导入我的组件:从'ng2-lazyload-image'导入{LazyLoadImageDirective};
在我的模板中:
在上面的模板中,userProduct.ImageCollection是从Fire-store获取的动态图像数组,但在加载页面后我遇到了上述错误。也许有一些我忽略的东西,但我似乎无法看到它是什么。
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, enableProdMode } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { LazyLoadImageModule } from 'ng2-lazyload-image';
@NgModule({
declarations: [
MyApp,
ImageSlider
],
imports: [
BrowserModule,
LazyLoadImageModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
TranslateModule.forRoot({
loader : {
provide : TranslateLoader,
useFactory : (createTranslateLoader),
deps : [HttpClient]
}
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ImageSlider,
],
providers: [
StatusBar,
SplashScreen,
Clipboard,
{provide: ErrorHandler , useClass: IonicErrorHandler},
Network
]
})
export class AppModule {}
enableProdMode();
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
<img [defaultImage]="assets/imgs/product_defaultImg.png" [lazyLoad]="userProduct.ImageCollection[0].url" [offset]="offset">
你走错了路。
import
LazyLoadImageDirective
到你的组件是错误的。
运行npm install ng2-lazyload-image --save
后,请按照以下步骤操作。
在你的app.module.ts
import { LazyLoadImageModule } from 'ng2-lazyload-image';
@NgModule({
imports: [ LazyLoadImageModule ]
})
export class AppModule {}
然后,您可以在HTML中使用它,如下所示。
<img [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset">