在应用惰性加载图像后在ionic3中重新加载页面后出现上述错误?
我采取的步骤:
运行Npm: npm安装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">
答案 0 :(得分:-1)
您走错了路。
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">