如何在Angular 5组件中从API URL加载图片？

Alright, let's walk through fixing this—your current setup has two main issues: how you're handling the async HTTP call in the service, and how you're passing the image data to the <img> tag. Here's the step-by-step solution:

Right now, you're subscribing to the HTTP call inside the service and trying to return the result from the callback—this won't work because HTTP calls are asynchronous, and the callback's return value doesn't propagate back to the component. Instead, return the Observable directly so the component can handle the subscription:

// login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoginService {
  constructor(private http: HttpClient) {}

  loginImg(): Observable<Blob> {
    const url = "http://localhost:59078/api/image/login";
    // Return the Observable instead of subscribing here
    return this.http.get(url, { responseType: 'blob' });
  }
}

You can't bind a Blob directly to an <img> tag's src attribute. Instead, you need to convert the Blob to an object URL using URL.createObjectURL(). Also, make sure to clean up this URL when the component is destroyed to avoid memory leaks:

// your-component.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { LoginService } from './login.service';

@Component({
  selector: 'app-your-login-component',
  template: '<img mat-card-sm-image [src]="imgUrl" alt="Login Image" />'
})
export class YourLoginComponent implements OnInit, OnDestroy {
  imgUrl: string | null = null;
  private imageObjectUrl: string | null = null;

  constructor(private loginService: LoginService) {}

  ngOnInit(): void {
    this.loadImage();
  }

  loadImage(): void {
    this.loginService.loginImg().subscribe({
      next: (imageBlob) => {
        // Create an object URL from the Blob
        this.imageObjectUrl = URL.createObjectURL(imageBlob);
        this.imgUrl = this.imageObjectUrl;
      },
      error: (error) => {
        console.error('Failed to load login image:', error);
        // Optional: Set a fallback image if the call fails
        this.imgUrl = '/assets/fallback-login-image.png';
      }
    });
  }

  ngOnDestroy(): void {
    // Clean up the object URL to free browser memory
    if (this.imageObjectUrl) {
      URL.revokeObjectURL(this.imageObjectUrl);
    }
  }
}

Make sure your API is correctly returning the image as a Blob with the right content type. Here's a minimal working example:

// ImageController.cs
using Microsoft.AspNetCore.Mvc;
using System.IO;

[Route("api/[controller]")]
[ApiController]
public class ImageController : ControllerBase
{
    [HttpGet("login")]
    public IActionResult GetLoginImage()
    {
        // Replace this with your actual image source (file path, database blob, etc.)
        var imageFilePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images", "login-icon.png");
        var imageBytes = System.IO.File.ReadAllBytes(imageFilePath);

        // Return the image with the correct content type (adjust for jpeg/gif/etc.)
        return File(imageBytes, "image/png");
    }
}

• Async Best Practices: Always return Observables from service methods instead of subscribing inside them—this lets the component manage the subscription lifecycle and handle errors properly.
• Memory Management: Object URLs stay in memory until you revoke them, so always call URL.revokeObjectURL() in ngOnDestroy() to prevent memory leaks.
• Content Type Matching: Ensure your API returns the correct Content-Type header for your image format (e.g., image/jpeg for JPGs, image/png for PNGs).

内容的提问来源于stack exchange，提问作者Snake Eyes