在HTML Angular中显示来自JSON的图像

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  imageUrl: string;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<{ imageUrl: string }>('https://example.com/api/image').subscribe(data => {
      this.imageUrl = data.imageUrl;
    });
  }
}

<!-- app.component.html -->
<div *ngIf="imageUrl">
  <img [src]="imageUrl" alt="Image from JSON">
</div>

// 添加错误处理逻辑
this.http.get<{ imageUrl: string }>('https://example.com/api/image').subscribe({
  next: data => {
    this.imageUrl = data.imageUrl;
  },
  error: err => {
    console.error('Error fetching image:', err);
  }
});