如何使用httpResource获取图片并在HTML的img标签中渲染显示

Hey there! I see you're having trouble getting the image fetched via httpResource to show up in your <img> tag—even though the network tab confirms the image is being downloaded. The issue usually boils down to two things: not telling Angular to handle the image as raw binary data, and not converting that data into a format the img tag understands. Let's fix this step by step.

Step 1: Configure your httpResource correctly #

First, when defining your httpResource, you need to specify that the response should be treated as a Blob (binary large object). By default, Angular tries to parse responses as JSON, which breaks image data. Here's how to set it up:

import { httpResource } from '@angular/common/http';

// Replace the URL with your actual image endpoint
export const imageResource = httpResource({
  url: '/api/images/{imageId}',
  responseType: 'blob' as const, // This tells Angular to return the image as a Blob
});

Step 2: Fetch the image and convert it to a usable URL #

In your component, use the resource to fetch the image, then convert the Blob into an object URL. This URL is what the <img> tag can use to display the image. Don't forget to clean up this URL later to avoid memory leaks!

import { Component, OnInit, OnDestroy } from '@angular/core';
import { imageResource } from './path-to-your-resource';

@Component({
  selector: 'app-image-viewer',
  template: '<img [src]="imageUrl" alt="Loaded Image" *ngIf="imageUrl">'
})
export class ImageViewerComponent implements OnInit, OnDestroy {
  imageUrl: string | null = null;

  ngOnInit(): void {
    // Replace 'my-image-id' with your actual image ID
    imageResource.get({ imageId: 'my-image-id' }).subscribe({
      next: (imageBlob) => {
        // Create an object URL from the Blob
        this.imageUrl = URL.createObjectURL(imageBlob);
      },
      error: (error) => {
        console.error('Failed to load image:', error);
      }
    });
  }

  ngOnDestroy(): void {
    // Clean up the object URL when the component is destroyed
    if (this.imageUrl) {
      URL.revokeObjectURL(this.imageUrl);
    }
  }
}

Step 3: Bind the URL to your img tag #

In your component's template, just bind the imageUrl property to the src attribute of the <img> tag. The *ngIf ensures the tag only renders once the URL is available, preventing broken image icons.

Why this works #

• Setting responseType: 'blob' tells Angular not to parse the image data as JSON, so we get the raw binary data we need.
• URL.createObjectURL() creates a temporary URL that points to the Blob in the browser's memory, which the <img> tag can use to display the image.
• Revoking the URL in ngOnDestroy() frees up memory, which is good practice especially if your component is loaded/unloaded frequently.

Alternative: Using a Data URL
If you prefer a data URL instead of an object URL, you can use FileReader to convert the Blob:

const reader = new FileReader();
reader.onload = () => {
  this.imageUrl = reader.result as string;
};
reader.readAsDataURL(imageBlob);

This converts the Blob into a base64-encoded string that the img tag can use. However, object URLs are generally more efficient for larger images, so stick with that unless you have a specific need for data URLs.

备注：内容来源于stack exchange，提问作者Naren Murali