{"action":"created","issue":{"url":"https://api.github.com/repos/swagger-api/swagger-ui/issues/519","labels_url":"https://api.github.com/repos/swagger-api/swagger-ui/issues/519/labels{/name}","comments_url":"https://api.github.com/repos/swagger-api/swagger-ui/issues/519/comments","events_url":"https://api.github.com/repos/swagger-api/swagger-ui/issues/519/events","html_url":"https://github.com/swagger-api/swagger-ui/issues/519","id":39563723,"number":519,"title":"Images broken when using authentication","user":{"login":"MaxPMagee","id":941809,"avatar_url":"https://avatars.githubusercontent.com/u/941809?v=3","gravatar_id":"","url":"https://api.github.com/users/MaxPMagee","html_url":"https://github.com/MaxPMagee","followers_url":"https://api.github.com/users/MaxPMagee/followers","following_url":"https://api.github.com/users/MaxPMagee/following{/other_user}","gists_url":"https://api.github.com/users/MaxPMagee/gists{/gist_id}","starred_url":"https://api.github.com/users/MaxPMagee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MaxPMagee/subscriptions","organizations_url":"https://api.github.com/users/MaxPMagee/orgs","repos_url":"https://api.github.com/users/MaxPMagee/repos","events_url":"https://api.github.com/users/MaxPMagee/events{/privacy}","received_events_url":"https://api.github.com/users/MaxPMagee/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/swagger-api/swagger-ui/milestones/5","html_url":"https://github.com/swagger-api/swagger-ui/milestones/v2.1-M2","labels_url":"https://api.github.com/repos/swagger-api/swagger-ui/milestones/5/labels","id":916898,"number":5,"title":"v2.1-M2","description":"Add support for:\r\n\r\nMaps\r\nComposition\r\nEnums\r\n","creator":{"login":"fehguy","id":249413,"avatar_url":"https://avatars.githubusercontent.com/u/249413?v=3","gravatar_id":"","url":"https://api.github.com/users/fehguy","html_url":"https://github.com/fehguy","followers_url":"https://api.github.com/users/fehguy/followers","following_url":"https://api.github.com/users/fehguy/following{/other_user}","gists_url":"https://api.github.com/users/fehguy/gists{/gist_id}","starred_url":"https://api.github.com/users/fehguy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fehguy/subscriptions","organizations_url":"https://api.github.com/users/fehguy/orgs","repos_url":"https://api.github.com/users/fehguy/repos","events_url":"https://api.github.com/users/fehguy/events{/privacy}","received_events_url":"https://api.github.com/users/fehguy/received_events","type":"User","site_admin":false},"open_issues":0,"closed_issues":77,"state":"closed","created_at":"2014-12-29T18:05:17Z","updated_at":"2015-06-15T13:22:14Z","due_on":"2015-03-22T07:00:00Z","closed_at":"2015-06-15T13:22:14Z"},"comments":4,"created_at":"2014-08-05T20:49:41Z","updated_at":"2015-08-14T09:54:10Z","closed_at":"2015-03-06T19:32:21Z","body":"Following the wiki advice, we've got basic auth working for our requests. We've got a GET target that will respond with png or bmp image data. The requests are sending the data correctly, I see the image and can download its data (and open the resulting file to observe the correct image) when using Postman's GET.\r\n\r\nIn Swagger, the image GET is performed correctly, the response code is 200, and when I inspect the response.data, it shows:\r\n\"�PNG\r\n\r\nIHDR&...plus lots more silly characters that ruin this post\"\r\n\r\nfor a png. These are all good signs, however, in the Swagger UI, the image shows a broken image icon. The source is set to the target (so, theoretically, in an unauthenticated GET target, the browser would just pull that image in):\r\nswagger-ui.js contains this line of code:\r\npre = $('').attr('src', url);\r\n\r\nSince we're using authentication on our target, the browser's GET fails with a 401 Unauthorized error.\r\nAs a work-around, I thought I'd try to use the actual data that was retrieved in the original, successful response, but I'm not having any luck.\r\n\r\nIt looks like it's coming over the wire as plain vanilla binary image data. I tried btoa(content)- content is set above:\r\nif (response.content === void 0) {\r\ncontent = response.data;\r\nurl = response.url;\r\n} else {\r\ncontent = response.content.data;\r\nurl = response.request.url;\r\n}\r\n\r\nThis gives me this error:\r\nFailed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.\r\n\r\nStackoverflow tells me to wrap the content in unescape(encodeURIComponent()):\r\nhttp://stackoverflow.com/questions/9786508/javascript-atob-returning-string-contains-an-invalid-character\r\n\r\nThis executes, (but the image still shows as broken) and gives me output like the following:\r\n77+9UE5HDQoaCgAAAA1JSERSAAAAJgAAAEAIBgAAAHbvv70F77+9AAAACXBIWXMAAAsSAAALEgHvv73vv71+77+9AAAA...lots more\r\n\r\nWhen I add it as the image source:\r\n<img src=\"data:image/bmp;base64,77+9UE5HDQoaCgAAAA1JSERSAAAAJgA...yada yada\"\r\nthe image icon remains broken.\r\n\r\nTo verify that the approach will work if I get the encoding right, I dropped my sample image into this converter:\r\nhttp://webcodertools.com/imagetobase64converter/Create\r\n\r\nIt gave me this output:\r\niVBORw0KGgoAAAANSUhEUgAAACYAAABACAYAAAB2kAXpAAAACXBIWXMA...etc.\r\n\r\nWhen I overwrote the content with that base64 data (hardcoded in), it shows the correct image.\r\n<img src=\"data:image/bmp;base64,iVBORw0KGgo...yada yada\"\r\n\r\nLong story short, I am not good at Javascript data conversion, anybody see what I'm doing wrong...and can we get authentication/images fixed in the next version?\r\n\r\nCode snippet from swagger-ui.js (about line 1855) that I'm hacking on:\r\nelse if (/^image\\//.test(contentType)) {\r\n// original code:\r\n//pre = $('').attr('src', url);\r\nvar b64data = window.btoa(unescape(encodeURIComponent( content )));\r\n// here's the hardcoded data:\r\n//var b64data = \"iVBORw0KGgoAAAANSUhEUgAAACYAAABACAYAAAB2kAXpAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH1QcWFRE6xk1oVgAAAdRJREFUaN7tWtluxDAILMj//8v0oXIVUQdzDO5m20j7EsdmMtxkSUTko3gR0Y971WMHAswKxFzPAhxZQDuBc52IUuA4CkpEQoJEZKlqGLDsm2fBcTeoLDhGeqJ1PwqOs2ythCCYLTOmwXlBeVnj6ptNMCimXHFsxYIVWHdBtzWOTaFaJdbaMRuzhFYBwWws81IeNXPEg64HagHW2pEkbgncgYkAHij17ABGWWQPQyuDJqLvn45nCAfgigHr4IoEx167uhNkBdnj1cVdcN3lzbnvagK3WrGaEW9dn21CLIcYldoenbi3qqx2OJEW706lfAKUDjFpxnR6QbOlbXclg6OVgVXrRxgJM2YlYx0WKilqt4ctuit2lgF/ZZxPub+3UZkAjxeKL1vBetrAUD2G8jZviuKuWUXVDrnL66rPs960a3IjXldR/+gOFVlwjDwYOWmkr2cEBsa79zqjXZ0zolWr5cFeb/bI4BWlGZWgQ8zQ+s4c3uE47V756FwZAoZq9VvGUI9XZQez78vYtBlvh+X1/tCoE/XsS6kSPlFECvsbxt8VaNsY625Y/hvetwE2PLYUyYeeL3Me2xzIpBxJTTuA4/R8wguQfwvUjpDne2Xl7zOZ6xM/e1/WBnq+CAAAAABJRU5ErkJggg==\"\r\nvar outputImg = document.createElement('img');\r\noutputImg.src = 'data:'+contentType+';base64,'+b64data;\r\npre = outputImg;"},"comment":{"url":"https://api.github.com/repos/swagger-api/swagger-ui/issues/comments/131053546","html_url":"https://github.com/swagger-api/swagger-ui/issues/519#issuecomment-131053546","issue_url":"https://api.github.com/repos/swagger-api/swagger-ui/issues/519","id":131053546,"user":{"login":"agusgr","id":8961572,"avatar_url":"https://avatars.githubusercontent.com/u/8961572?v=3","gravatar_id":"","url":"https://api.github.com/users/agusgr","html_url":"https://github.com/agusgr","followers_url":"https://api.github.com/users/agusgr/followers","following_url":"https://api.github.com/users/agusgr/following{/other_user}","gists_url":"https://api.github.com/users/agusgr/gists{/gist_id}","starred_url":"https://api.github.com/users/agusgr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/agusgr/subscriptions","organizations_url":"https://api.github.com/users/agusgr/orgs","repos_url":"https://api.github.com/users/agusgr/repos","events_url":"https://api.github.com/users/agusgr/events{/privacy}","received_events_url":"https://api.github.com/users/agusgr/received_events","type":"User","site_admin":false},"created_at":"2015-08-14T09:54:10Z","updated_at":"2015-08-14T09:54:10Z","body":"Hi @webron,\r\n\r\nWe are using the version 2.1.1."}}