Get image from url


#1

Hi,

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}
      )
        .toPromise()
        .then((response) => {

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

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

This is my html:

<img (click)=“action()” class=“avatar-image"
src=”{{imgStr}}">

component:

this.imgStr = url output of the request

For example for this google image:

http://www.classictvinfo.com/PerryMason/TVSeries1/Person.jpg

The method returns an url like this:

blob:http://localhost:8100/01b86ed4-72e2-405a-a834-5d991d91bac0

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

What I’m doing wrong?


#2

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

console.log(URL.createObjectURL(toDownload))


#3

The output is this:

blob:http://localhost:8100/c31e545b-81f9-413e-8085-274a2054cbb9


#4

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


#5

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


#6

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


#7

Is on a not-own remote server


#8

it is not in your localserver right ?


#9

No, it not be on my local server


#10

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

http://localhost:8100/c31e545b-81f9-413e-8085-274a2054cbb9

or you can direct send actual url to your img tag


#11

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


#12

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


#13

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


#14

you can convert image follwing way


Display Blob Image from server
#15

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;
            console.log(dataUrl)
            var base64 = dataUrl.split(',')[1];
            console.log(base64)
            return(base64);
          };
          reader.readAsDataURL(toDownload)

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

------=_Part_18_19650293.1510067330953
        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="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soapenv:Body>

        ..... data of the user
    </soapenv:Body></soapenv:Envelope>
        ------=_Part_18_19650293.1510067330953
        Content-Type: image/jpeg
        Content-Transfer-Encoding: binary
        Content-Id: <ACC047E73E810E9A61470902A1E4483F>

       ����JFIFdd��C��C��dd��
��6!aR�1AQ�"#q�2�4CSb���������?����9@�P3��9@�P3��9@�P3�s�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�PC�=�5w�
C��P�x@�=�j8�^��N����]X����4��3fql�]�Ʈ��VG-5m+^�:w���S�+���A���c�8����Yd�9`�t��g8��&W�� صw�
C��P�x@�=�5w��8@��S�
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�
;cO���?�����9@�9@�9@�9AP�x@�=�5w�
C���3   ����ĩ ғ3|��F�!�:��[_��*�-Ѹ]�P��0ʌB(���ߍ�{�7�ͽ����ר{� j���������� jp���
3�h�]ӵ2�M�;�
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��
------=_Part_18_19650293.1510067330953--

Thanks