1

I'm a newbie on Angular. I show an image returned by Web API.

So the imageURL likes:

localhost/get-image/?target=content&sizetype=348x194&id=129

And I just bind it to img src.

<img [src]="imageURL"/>

The img shows image exactly what I want.

But I search around how to load an image from API in Angular, the major result is using Blob and no one does like what I'm doing. Likes these questions.

Load image from api url into angular 5 component

Getting Image from API in Angular 4?

How to get image from rest api using HttpClient in angular 4

and a lot of questions about how to use Blob

I tried using Blob but I don't see the difference.

So I wonder why and when using Blob? Sorry if this question is so basic.

Drenai
  • 11,315
  • 9
  • 48
  • 82
Antoine V
  • 6,998
  • 2
  • 11
  • 34

1 Answers1

3

The decision to use Blob or an existing image URL is primarily based on what the server returns. If it returns a URL to the image on a file system, and you simply want to display it, then that's what you should use.

Some API's store images in a database, in the form of Blobs. In that case, when you retrieve the image, you will not be getting a URL to apply to the <img> tag, and instead will need to create an ephemeral URL using the data returned by the server e.g URL.createObjectURL(myBlob);

So basically it depends on the server, and the UI needs to support the data type that the server returns. There are exceptions of course, where image manipulation etc is required

The example links you provided are related specifically to API's that are returning Blobs

Comments or opinions welcome

Drenai
  • 11,315
  • 9
  • 48
  • 82