我有一個將顯示封面影像的組件。用戶可以上傳封面圖片，組件將顯示用戶上傳的圖片。如果用戶不上傳影像，那么我想顯示默認影像。
如果沒有用戶上傳的影像，我想回傳一個錯誤并呼叫 changeSource(event)，理論上應該將新的影像 url 系結到 img src。但是我對 event.target.src 沒有定義，并且我看到默認影像應該是一個空白區域。顯示自定義影像時它作業正常。
組件.html
<div *ngFor="let coverPhoto of coverPhotos">
<img src="{{coverPhoto}}"
(error) ="changeSource($event)" />
</div>
組件.ts
this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
this.coverPhotos = result;
}, error => {
this.errors = error;
this.changeSource(event);
}, () => {
}
);
changeSource(event) {
event.target.src = "https://imageurl";
}
uj5u.com熱心網友回復：
直接使用（其中 defaultImage 是 ts 檔案中保存默認影像路徑的變數）-
(error)="$event.target.src = defaultImage"
你的 HTML -
<div *ngFor="let coverPhoto of coverPhotos">
<img src="{{ coverPhoto }}" (error)="$event.target.src = defaultImage" />
</div>
作業示例在這里。
您正在 ts 中從這段代碼傳遞事件，這顯然是未定義的，并且您不需要從這里呼叫此函式 -
this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
this.coverPhotos = result;
}, error => {
this.errors = error;
this.changeSource(event);
}, () => {
}
);
uj5u.com熱心網友回復：
*ngFor 把它扔掉了。洗掉它似乎可以解決問題。不太確定為什么所以當我發現原因時會發布一個編輯。
<div>
<img src="{{coverPhotos}}"
(error)="$event.target.src = defaultImage" />
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/372622.html
標籤：javascript html 有角的 图片 rxjs