当我的图像仍然从服务器加载时，如何获取占位符图像加载

我正在用Angular 4/Ionic 3构建一个应用程序，该应用程序加载用户从服务器上载的图像。我目前使用下面的代码，但它不工作：当我的图像仍然从服务器加载时，如何获取占位符图像加载

<img src="{{user.image}} || assets/images/profileimage.png" />

我不知道我在做什么错。我认为它会显示占位符图像，直到主图像从服务器加载。相反，它仍然只是空白，直到主图像加载。有什么特定的Angular，我应该使用？

2017-06-16 Darrell

检查它https://ionicframework.com/docs/api/components/img/Img/ – Duannx

我不知道角或离子。但我认为你的img src是错的它应该是这样的 – karthick

你需要设置相对路径。 './asstes/images/profileimage.png“' –

isImgLoaded:bool = false;

<img *ngIf="!isImgLoaded" src="assets/images/profileimage.png" > 
<img [hidden]="!isImgLoaded" [src]="user.image" (load)="isImgLoaded = true" >

2017-06-16 06:38:20

我觉得你需要在第一个'img'或者只是'src'字符串文字路径中使用单引号...... typo？ –

@suraj感谢提示 - 我通过删除'[] ' –

-1

更好地使用这个懒加载插件。它的工作原理真棒..

安装：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;

如果您需要任何帮助，这让我知道..

希望这有助于..

2017-06-16 05:05:51

感谢您的反馈@Roopendra ..我编辑我的答案 –

@Roopendra你可以说这个答案是有用的;） –

是啊现在好多了:)谢谢！ – Roopendra

您需要提供一个字符串字面这里的相对路径。

<img src="{{user.image}} || ./assets/images/profileimage.png" />

或者尝试：

<img [src]="user.image || './assets/images/profileimage.png'" />

2017-06-16 06:35:53

回答