How to display an image that is a response to an API call?

Question

I have a requirement to use a REST api to display a profile image from a different system.

Here is the response we'd expect:

{
  "type" : "image",
  "status" : "published",
  "index" : 1,
  "ref" : "https://example.something.com/api/some_endpoint/images/1/data",
  "contentType" : "image/png",
  "published" : "2012-07-14T00:11:28.916+0000",
  "updated" : "2012-07-14T00:11:28.916+0000",
  "id" : "1234",
  "resources" : {
    "self" : {
      "ref" : "https://example.something.com/api/some_endpoint/images/1",
      "allowed" : [ "GET", "DELETE", "POST" ]
    }
  }
}

I see 2 things here that I don't completely understand:

1. If this is contentType: "image/png" , How would we display it on a page? Is there some type of html tag or js function that will print this image?

2. Is this response simply saying: "Use the ref url we've given you as the img src ?"

Thanks

Answer 1

Usually, you would just point your src to the path of your image. In the case where it happens asynchronously, you would just be setting the src element of your image to the location. Consuming that response in some ajax callback is not going to help you much unless you need to use some advanced drawing using canvas.