img src relativer Pfad in Winkel 4 zurückgegebenen undefinierten Fehler

Question

Ich versuche, Bilder auf meiner Website mit dieser Logik anzuzeigen: Bei der Initialisierung der Komponente wird Winkel img Links von einem Webserver (Google Firebase) erhalten. Die Bilder werden auf einem Image-Host-Server wie imgur gehostet. dann aktualisiert die Komponente und zeigt die Bilder an.

aber im Moment gab es einen undefinierten Fehler zurück. Der Detailcode ist unten abgebildet.

von home.component.ts

import { Component, OnInit, OnChanges } from '@angular/core'; 
import {HttpResponse, HttpEvent} from '@angular/common/http'; 
import {DbService} from '../db.service'; 
import {LEDProduct} from '../LED-product.model'; 
@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    sampleLEDLinks: LEDProduct[]; 

    constructor(private dbService: DbService) { } 

    ngOnInit() { 
    this.dbService.getHomePageImgs().subscribe(
     (returnedLinks: LEDProduct[]) => { 
     this.sampleLEDLinks = returnedLinks; 
     } 
    ); 

    } 

} 

aus Sicht Vorlage

<div class="row" *ngFor="let link of sampleLEDLinks"> 
    <img [src]="'//' + link.imgLink" alt="{{link.imgLink}}" width="100"> 
</div> 

LED-Produktmodellvorlage:

export class LEDProduct { 
    public imgLink: string; 

    constructor(imgLink: string) { 
    this.imgLink = imgLink; 
    } 

} 

jetzt, ich angemeldet auch die zurückgegebene URL, um sicherzustellen, Die Links werden tatsächlich an die App zurückgegeben. und dies wird die Konsole obj aus Chrom zurück protokollierten

(2) [{…}, {…}] 
0 
: 
{link: "i.imgur.com/hy9aFEq.png"} 
1 
: 
{link: "i.imgur.com/JRITacY.gif"} 
length 
: 
2 
__proto__ 
: 
Array(0) 

aber die Aussicht ist immer noch leer mit einem Fehler folgen, wie

ist es wegen des zurückgegebenen Typs nicht überein? Ich bin wirklich verwirrt

Answer 1

Versuchen <img *ngIf="link" [src]="'//' + link.imgLink" alt="{{link.imgLink}}" width="100">

EDIT: <img *ngIf="link" [src]="'/' + link.imgLink" alt="{{link.imgLink}}" width="100">

oder setzen eine vollständige absolute URL mit dem Hostnamen

Answer 2

Es stellt sich heraus, wenn Winkel berührt Server Sie es müssen asynchron . Daher muss ich Async Pipe verwenden, um Daten vom Server zu erhalten.

gibt es ein paar einfache Änderungen erforderlich:

1. den zurückgegebenen Typ Karte im Dienst zu modellieren:

   getHomePageImgsType(): Observable {

   return this.httpClient.get<LEDProduct[]>('.../linkList.json') 
   .map(
       links=> links 
   ); 
   

2. Add async Rohr zum Objekt [] on view Komponente:

<div class="row" *ngFor="let link of sampleLEDLinks | async"> 
    <img [src]="'//' + link.imgLink" alt="{{link.imgLink}}" width="100"> 
</div> 

Answer 3

-Code in app.component.ts-

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    sampleLEDLinks = [ 
    {link: "i.imgur.com/hy9aFEq.png"}, 
    {link: "i.imgur.com/JRITacY.gif"} 
    ] 
} 

-Code in app.component.html

<img *ngFor="let link of sampleLEDLinks" [src]="'//' + link.link">