我正在尝试使用expressjs api发送jpeg图像。但我一直在低于错误。
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:3000/api/1.0/profile/avatar", ok: false, …}
error
:
error
:
SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:48937:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16794) at p (http://localhost:8100/build/polyfills.js:2:27648) at XMLHttpRequest.v (http://localhost:8100/build/polyfills.js:2:27893)
text
:
"����JFIF���
( %!1!%3+...383,7(-.+↵↵↵+++++++++++++++-+++++++++++++++++++++++++++++++++++����"����7!1AQaq���"23�4BRr����#b���������?��N��:0b��[�ǽW_ݏ�g�ؚ��ez���Mgi�↵��r��Fw&":����Rfr�G��+�r��]^�~��]qD{��93\�6���/���3�u��� n��f~M5O�1ݽ]��T�umN�S�����ﶱ;���f.TN(�*��[@.܋V����P���\ν)���3?�#i�_L����},^�3��:�n�Ȼn&��K���������P��ʣ�z'*�j:X\������(��=S��M9Y�ݗ� �2q?�������^XF���^�i���V�G-'��↵ O�MWziNQ��8i�t�q����z3��.�/�ʯ�j���~�O|�$��/F�U���=S��[��LWĢ�m{�O-�A�k�t�9�DϞ�֭�[��r[�،=Q�3��� �Z�t�Q�I����~���[Ld4�j��x��n�V�5O(�;����>;^�;�=���7��3Nt��~��������LG��0
↵b�]=.����|�qt����67ZcL�gH�&��/r*�M1�D������{�T�Y�y� ժ��؝p�����nҏ�nt19O8�ǒ�.#E��:�
:ϏRu�}w�r����O����ܩ���L�����\�2z')�~K\m7���b+�ϹɌ���;8��|3�uU�7��T������>`�9�i�:��ň�TZҏ~�ͼ�o��|s�?��#�<G�Α=*���������F��}e��rz�h���]�������^M�8�N��˶5�-Ӏ~����9�11�O�[�mU������O-1����S-܋��nbc��1��p�|U��J����'*i7=��L�ҟ�E9:ۮmW�������<db#*�����$;L�k��x�������O�@d#p���"
__proto__
:
Object
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure during parsing for http://localhost:3000/api/1.0/profile/avatar"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"http://localhost:3000/api/1.0/profile/avatar"
以下是我的代码。我在这里要做的是,我从目录中获取一个图像,并在写入头后发送它。我不知道为什么我会收到此错误。知道怎么克服这个吗?
let imagepath = __dirname + '/../images/avatar.jpeg';
let image = fs.readFileSync(imagepath);
let mime = fileType(image).mime;
console.log(image);
response.writeHead(200, {'Content-Type': mime });
response.end(image, 'binary');
这是我的客户端代码的更新。
let myHeaders = new HttpHeaders({
'Content-Type': 'image/jpeg',
'withCredentials': 'true',
'Authorization': localStorage.getItem('token')
});
return this.http.get('http://localhost:3000/api/1.0/profile/avatar', { headers: myHeaders });
更新此问题。
所以我用以下
替换了this.http.get
return this.http.get('http://localhost:3000/api/1.0/profile/avatar', { headers: myHeaders, responseType: 'blob', }).map(blob => {
let urlCreator = window.URL;
return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
});
返回的响应是base64。现在我尝试使用img
标记渲染base64图像,但不知何故它不渲染。下面是我用于渲染的代码。
this.profileService.getUserAvatar().subscribe(avatar => {
response[0]['image'] = 'data:image/jpeg;base64,' + btoa(avatar);
}, error => {
console.log(error);
});
this.profile = response; // this.profile works fine. when I console.log this.profile then is show property image which I use in template below to render.
这是html
<div *ngFor="let p of profile">
<img [src]="p.image">
</div>