在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ angular4.x 圖片不存在如何顯示默認(rèn)圖片?

angular4.x 圖片不存在如何顯示默認(rèn)圖片?

angular4.x 圖片不存在如何顯示默認(rèn)圖片?

回答
編輯回答
旖襯

<img [src]="yourImgPath" onError="this.src='yourErrorDefaultImg' ">.第一個屬性[src]是你要顯示的圖片的路徑，第二個屬性onError是圖片不存在是顯示的默認(rèn)圖片

2017年10月28日 05:08
編輯回答
嘟尛嘴

targetImg ? targetImg : defalutImg

2017年11月15日 01:15
編輯回答
吢涼

用 http 模塊請求一次吧，返回 404 之類的就不修改鏈接地址了。

2017年12月15日 12:04
編輯回答
初念

通過自定義指令可以使用解決了,上代碼
指令內(nèi)容error-img.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appErrorImg]'
})
export class ErrorImgDirective {
// tslint:disable-next-line:no-input-rename
@Input('appErrorImg') errorImagSrc: string;
constructor(public elementRef: ElementRef) { }

@HostListener('error', ['$event.target'])
ImageError(event) {

if (this.errorImagSrc) {
  event.src = this.errorImagSrc;
} else {
  // tslint:disable-next-line:max-line-length
  event.src = 'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=96baa30f1bdfa9ece22e501752d0f754/342ac65c103853439f9b46329913b07eca808849.jpg';
}

}
}
使用方法：
如果傳值則使用值的圖片，否則使用指令內(nèi)默認(rèn)圖pain

<img [src]='product?.goodsImg' appErrorImg>

<!-- <img src="../../../assets/images/404icon.png" > -->
<div class="activity-info" *ngIf="showActive||product?.is_act">
  <img [src]="product?.act_img" appErrorImg="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=f98266a88dd6277ff612343818391f63/1b4c510fd9f9d72a1edae20ede2a2834349bbb63.jpg">
</div>
2017年11月5日 06:13