Get image from url


I’m trying to represent an image into the UI of my app.

This is the code of my request service:

requestBlob(url): Promise<any> {
    if (this.connectivityService.isOnline()) {
      let headers = new Headers({'Content-Type': 'application/jpeg'});
      return this.http.get(url, {withCredentials: true, responseType: ResponseContentType.ArrayBuffer, headers: headers}
        .then((response) => {

          const toDownload: Blob = new Blob([response.arrayBuffer()], {type: 'image/jpeg'}); //and this type:
          return URL.createObjectURL(toDownload)

        }).catch(error => {
          return Promise.reject(error);
    else throw {systemerror: "noconn"}

This is my html:

<img (click)=“action()” class=“avatar-image"


this.imgStr = url output of the request

For example for this google image:

The method returns an url like this:


If i bind this result to src of an this not render the image.

What I’m doing wrong?

are you sure you get correct url ?
what is out put of


The output is this:


according to url , it will search for your image in root folder
and i don’t know how you implement your html so i can’t say anything where you stuck

I’ve followed the most common way to get img from api request, I have to download to local folder to render it?

I’ve updated original question with more details of implementation

where is your actual image you want to render in img tag ?

Is on a not-own remote server

it is not in your localserver right ?

No, it not be on my local server

that is the problem
if you want to use external image in your app then you have to first upload it in your project folder and then you can give relative path according to


or you can direct send actual url to your img tag

My problem is that is ‘concept test’,

Usually I don’t know the url of the image, I receive the binary of a image from a api request

if you will get image in api request then just upload it within your desire folder with something name or you can create temporary thumb in your folder and just pass that image url to src

image binary source that will work with img src usually starts with ‘data:image/jpg;base64,:’ not ‘blob:’

you can convert image follwing way

I’ve tried with a Reader and with a image url can transform it to obtain a base64 string and render it.

let reader = new FileReader();
          reader.onload = function() {
            var dataUrl = reader.result;
            var base64 = dataUrl.split(',')[1];

My problem now is with the api. It returns me a SOAP response with attachements It contains a part of xml and a part of binary data that is the image. If use the blob method it generate a base 64 but it not renders. I think that it encode all the response not just the image.

Any idea how can i get this image? This is a example of response

        Content-Type: text/xml; charset=UTF-8
        Content-Transfer-Encoding: binary
        Content-Id: <94A7DA36FAAE3F537AD3295BF2DFF5AD>

        <?xml version="1.0" encoding="UTF-8"?><soapenv:Envelope xmlns:soapenv="" xmlns:xsd="" xmlns:xsi=""><soapenv:Body>

        ..... data of the user
        Content-Type: image/jpeg
        Content-Transfer-Encoding: binary
        Content-Id: <ACC047E73E810E9A61470902A1E4483F>

C��P�x@�=�j8�^��N����]X����4��3fql�]�Ʈ��VG-5m+^�:w���S�+���A���c�8����Yd�9`�t��g8��&W�� صw�
NT���L&��5CY�O�d��:�"ۋ{��z�om�A��I&��� ��$����襉��J�Z湦��75�?��^�#kb�H?-#Zʆ�����x��>�D��� jp���Z������;��j�(8��]����&��WO$������%�'����Z
��*&�ꞟ� O5�1��%�D������;��j�(������r���g(�-��m-e]+&mK)��6T0��Z�=��F@@A��8ÍUP�cC��Ml���9sJ��P3��9A8�8�8��s\�5�������q�T����ps]N���p��X��DZ�p�������M8�)VC�
C���3   ����ĩ ғ3|��F�!�:��[_��*�-Ѹ]�P��0ʌB(���ߍ�{�7�ͽ����ר{� j���������� jp���
qh1��!��S`���M�i>��ϧ�r�3! X=�����S5��5�
kE�Ѱ �S�
N58@��-A�~�����|媆�,����{��I��������Sbs�m�F����o��S��'��z��Ӵ�&�F��os���A�@@Ac`*���l]����2��k؇X?{nH?����*�Y31hc�.I�����2ٚ���k���n(=��;��<���W�!���̓~�3XF��?؁���\)�����䩫���)��q���=�A�;�ªSE9������=�=���z�,r���t_�i���no���9!�g(1�QSA5D�ӧc�%��V��YW5uT�u�4�.y������ ����������7Ӹ���Z�`�"���o��?����^Y�(0���8��>^k���b����d��