Make Images work in UI

[alackerbauer]

The client should be able to render an image of type attachment in the UI. As an example QuestionnaireResponse, please see this link: http://testeconsent.ehealthinnovation.org/server/fhir/QuestionnaireResponse/appendectomy

The resulting UI (as showcased here: http://testeconsent.ehealthinnovation.org/client/econsentform/appendectomy) should be able to show at least one of the 3 image types:

• JPEG,
• SVG,
• PNG.

The data for an attached image in the QuestionnaireResponse could look like that:

{
   "linkId": "image2",
   "text": "Image Red Dot PNG",
   "answer": [
     {
       "valueAttachment": {
       "contentType": "image/png",
       "data":      "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
         }
      }
   ]
}

[wichopy]

Working in latest version of client, except for the SVG example. Could you confirm that the sample has a decodable SVG?

[alackerbauer]

Thanks, it is working fine. The example contains a decodable SVG. The example was:

{
   "linkId": "image3",
   "text": "Image  SVG",
   "answer": [
      {
         "valueAttachment": {
       "contentType": "image/svg",
       "data": "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDE4MC41ODYgMTgwLjU4NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTgwLjU4NiAxODAuNTg2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMTU4LjEyMSw5MS40MTNjMC0xMy43MzMtMTEuMTc1LTI0LjkwNi0yNC45MS0yNC45MDZjLTEzLjczNSwwLTI0LjkxLDExLjE3My0yNC45MSwyNC45MDYNCgljMCwxMS4xMjQsNy4zMjksMjAuNTY1LDE3LjQxLDIzLjc1NnYyNC45NDZjMCwxNC4wNDQtMTEuNDI2LDI1LjQ3MS0yNS40NzEsMjUuNDcxYy0xNC4wNDIsMC0yNS40NjctMTEuNDI2LTI1LjQ2Ny0yNS40NzFWODguOTc4DQoJYzIxLjE0Ni0zLjU4MSwzNy4zMDctMjIuMDE2LDM3LjMwNy00NC4xNjVWNy41YzAtNC4xNDItMy4zNTctNy41LTcuNS03LjVIODUuOTI4Yy00LjE0MywwLTcuNSwzLjM1OC03LjUsNy41czMuMzU3LDcuNSw3LjUsNy41DQoJSDk3LjA4djI5LjgxM2MwLDE2LjQzNS0xMy4zNzEsMjkuODA1LTI5LjgwNywyOS44MDVjLTE2LjQzNywwLTI5LjgwOS0xMy4zNy0yOS44MDktMjkuODA1VjE1aDExLjE1NGM0LjE0MywwLDcuNS0zLjM1OCw3LjUtNy41DQoJUzUyLjc2MiwwLDQ4LjYxOSwwSDI5Ljk2NWMtNC4xNDMsMC03LjUsMy4zNTgtNy41LDcuNXYzNy4zMTNjMCwyMi4xNDksMTYuMTYsNDAuNTg1LDM3LjMwOSw0NC4xNjV2NTEuMTM4DQoJYzAsMjIuMzE1LDE4LjE1Myw0MC40NzEsNDAuNDY3LDQwLjQ3MWMyMi4zMTUsMCw0MC40NzEtMTguMTU1LDQwLjQ3MS00MC40NzF2LTI0Ljk0Ng0KCUMxNTAuNzkyLDExMS45NzksMTU4LjEyMSwxMDIuNTM3LDE1OC4xMjEsOTEuNDEzeiBNMTMzLjIxMSwxMDEuMzI1Yy01LjQ2NSwwLTkuOTEtNC40NDctOS45MS05LjkxMmMwLTUuNDYyLDQuNDQ1LTkuOTA2LDkuOTEtOS45MDYNCgljNS40NjUsMCw5LjkxLDQuNDQ0LDkuOTEsOS45MDZDMTQzLjEyMSw5Ni44NzgsMTM4LjY3NiwxMDEuMzI1LDEzMy4yMTEsMTAxLjMyNXoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K"
         }
      }
   ]
}

and the SVG can be decoded successfully with this decoder: http://freeonlinetools24.com/base64-image

Also another SVG example did not work.

[wichopy]

Could you update your contentType to image/svg+xml and try again.

[alackerbauer]

No change, SVG still doesn't show up even after "svg+xml": http://testeconsent.ehealthinnovation.org/client/econsentform/appendectomy

But showing an SVG is low priority now, jpeg and even gif's work perfectly fine.

[wichopy]

Looks like there are compatibility issues in Safari but works fine in chrome.