使用图像内容类型显示来自http响应的图像

Question

假设我有网址但不知道它会返回什么.我对该URL执行ajax调用javascript并获取内容.所以我测试它的内容类型并决定如何在我的网页中显示响应.如果它是json或html或任何其他文本,我会根据需要附加格式化的内容.

现在当内容类型是图像时,我得到图像的响应数据,这不是base64编码的.我当然需要在常规<img>标签中显示图像.这就是我被卡住的地方.

有没有办法从它的内容数据显示图像？

编辑

为了说清楚,听到的是我得到的回应:

"?PNG


IHDR??Nn?tEXtSoftwareAdobe ImageReadyq?e<fiTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.0-c060 61.134777, 2010/02/12-17:32:00        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmpMM:OriginalDocumentID="xmp.did:8E935AD20E206811822AA1DC23D37A5E" xmpMM:DocumentID="xmp.did:606C15E3DC2311E2A81EB553B5E13CE0" xmpMM:InstanceID="xmp.iid:606C15E2DC2311E2A81EB553B5E13CE0" xmp:CreatorTool="Adobe Photoshop CS5 Macintosh"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:0E49679B0D20681192B0DE3AF6794EF0" stRef:documentID="xmp.did:8E935AD20E206811822AA1DC23D37A5E"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>?,??
3IDATx??R?JGI&m?????I?????K((MC7?nH????%???ef????0???u?? i%????:?`K?{????????u?>???(????(????(????(????(????(????(????(????(????(??((??((??((??((??(???&??b1???V??t???j?T*??e??R??t?????c0?&??|}yy????ns?|Cc?l???7k?????ju:?E?????")Ye?
W?U?Mu+"n?????3
????zzz*c??%????K?g4?&?T???z=_?????G???@??(?R??ng??^??????@?F???2G_??],t?Fb:?????^??????@?  ??n?F#?`????|???<??_!??z???,????p}??U?????I}???
??h?6N??}||$hIY???p^IR???
(k*??D?c???)?????s?*l?e?n-}??o??f:??P?[.???KdP?be
?!9??,?h??!?r????|????>}??o?????W.??#?5?    
?5IY)Zx?'?4?:88??P???????P?Z????czeM?51(()??4????0f?P?03???A?'???Y?5)he?xT??????|??eQ?$?j?jF???~AY?~_??????A??`????dOZ?=??f??%?{?}??Qi6?????+U,?4N??E??(?J9^s?m?e? ?#bQ6?5?D,??G????e???~??(?h3????*V
??
!??-V*???[???,???v?????2????    ?P?8?PeQ??d0?g.eM?I?'?????}?
w?lb?F??|??????G?Y/..^^^dl???nU0????hv????????????)m???????ec??z?yK??????n?9??????=?lT????4?q?'''??E)j??6q??b??:??T?U???F????%??M?? ? ?????,??7?6?6?????[ ??!;???7)x?9)?/?????S?*????????i??GAJ?~????jMh*?j?f?Y??UV?k8??G9r?v?^????O????\W 9}^V?q?`(??b)+?9???IVj??k?????????K?x?-???Z?Pe???h4?L?k?O8[*3??;?`???b???qAFi?(U??\.?C?6_??o(?Ri8???`P??k???P??&?|??#???o=?V??d?p?K???h?I  N?)%fY?I?????LpWq??v"????*??4^G4bsn??J7h?^*?z?????{???V?????(+}#????=?$?(+?z!H?><<???SJD?¯e? ?Q6??xAxuu%rx?]v)?4?Y%?d?rK???z??x??Q?
:;?h??Iu?mZ?h??bC???????? F???g???B?AY??lje?Q]?\?V?y5???3?r??x?_qN????? h?W6t?S?<??{{t??h8?l??:?  ??mE??Q?;Y*{??&?`0?x???????(V   f|??Yˆ???qfH?Z??z??i\?S3?LP6?/?? h??n???????>??NP6??2LaA/VP?q!?2?Q6k?U??oWa?(??PK??+??V???(ky?0_?g??fIe????*;????t??A?W\)?qb????lb???*?ex??y#?ir\?4??bWs?:9?
]?m?????K??=???????_?)??K???O???R6?x??"J???}Q?????)+?^?ymS???????kP??B6??J}???/????+?COo???f?0?1??5OY??{O???????1Q6??P?????c??:?????G?>gd???0e??{??????L?73LY}?wsO??*??t??p?fe?*?\k?d?f*k5?o??a?jUx??F9?6G+e?e?R?n*???0??k??10??v6
?$`Vm?_w?v???pm?Y#0???*?T6J-?j??*U??&???????Z?X)kzU`?vyW">?9??|?)??]????F?;?e?E???*(??????g????%?}???,?,??,?,?&???/???Q???0??0e#?0??T*?lZ-?~!?@R??V5l??j???>Em?)p}}m?????m=??á??????^?g\?e??.b???Y$?U% ?v:?JX{?up^?8???]??@??_??Z??&??t<o{W??T*1?V???+??OOO??Wr????????L-????????~?kh?J?V???R?]??b?r???1?Bu_?p????zq?W2X$?o?}"?HYYS.??o??S(RK?V+??}\a?7?;?)_???A?d??1#Y$vl?{?????!???i????T?e?X?
(??((??((??((??((??((??((??((??((??((??(????(????(????(????(??`/?0a?????IEND?B`?"

Answer 1

var rawResponse = "?PNG...."; // truncated for example

// convert to Base64
var b64Response = btoa(rawResponse);

// create an image
var outputImg = document.createElement('img');
outputImg.src = 'data:image/png;base64,'+b64Response;

// append it to your page
document.body.appendChild(outputImg);

Answer 2

接受的答案对我不起作用。所以这是我的解决方案：

1. 我正在使用fetch下载图像，所以我需要将响应读取为blob：

let data;
fetch(url).then(response => {
  response.blob().then(blobResponse => {
    data = blobResponse;
  })
});

2. 将blob显示为图像：

const urlCreator = window.URL || window.webkitURL;
document.getElementById('myImage').src = urlCreator.createObjectURL(data);