当我的图像仍然从服务器加载时,如何获取占位符图像加载
我正在用Angular 4/Ionic 3构建一个应用程序,该应用程序加载用户从服务器上载的图像。我目前使用下面的代码,但它不工作:当我的图像仍然从服务器加载时,如何获取占位符图像加载
<img src="{{user.image}} || assets/images/profileimage.png" />
我不知道我在做什么错。我认为它会显示占位符图像,直到主图像从服务器加载。相反,它仍然只是空白,直到主图像加载。有什么特定的Angular,我应该使用?
isImgLoaded:bool = false;
<img *ngIf="!isImgLoaded" src="assets/images/profileimage.png" >
<img [hidden]="!isImgLoaded" [src]="user.image" (load)="isImgLoaded = true" >
我觉得你需要在第一个'img'或者只是'src'字符串文字路径中使用单引号...... typo? –
@suraj感谢提示 - 我通过删除'[] ' –
更好地使用这个懒加载插件。它的工作原理真棒..
安装:npm install ng2-lazyload-image --save
导入延迟加载在app.module.ts:import { LazyLoadImageModule } from 'ng2-lazyload-image';
imports: [ BrowserModule, LazyLoadImageModule ],
在乌拉圭回合的HTML
这种替换乌尔img标签: <img [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset">
在你的组件创建这个数字:
defaultImage = 'https://www.placecage.com/1000/1000';
image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
offset = 100;
欲了解更多信息请参阅本https://www.npmjs.com/package/ng2-lazyload-image
如果您需要任何帮助,这让我知道..
希望这有助于..
您需要提供一个字符串字面这里的相对路径。
<img src="{{user.image}} || ./assets/images/profileimage.png" />
或者尝试:
<img [src]="user.image || './assets/images/profileimage.png'" />
检查它https://ionicframework.com/docs/api/components/img/Img/ – Duannx
我不知道角或离子。但我认为你的img src是错的它应该是这样的 – karthick
你需要设置相对路径。 './asstes/images/profileimage.png“' –