Hanzo
November 13, 2017, 12:38pm
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?
are you sure you get correct url ?
what is out put of
console.log(URL.createObjectURL(toDownload))
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
Hanzo
November 13, 2017, 1:26pm
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
where is your actual image you want to render in img tag ?
Hanzo
November 13, 2017, 1:31pm
7
Hanzo:
Is on a not-own remote server
it is not in your localserver right ?
Hanzo
November 13, 2017, 1:35pm
9
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
http://localhost:8100/c31e545b-81f9-413e-8085-274a2054cbb9
or you can direct send actual url to your img tag
Hanzo
November 13, 2017, 1:46pm
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
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
Hanzo
November 13, 2017, 3:50pm
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
AJ.M.A
December 14, 2020, 10:29am
16
I have the same problem. Did you come up with a solution or workaround for this? Thanks in advance.