How to embed images inside of a Design Studio App without uploading to server.

[mike_howles4]

Description:

This document describes how to embed an image as standalone within your Design Studio application without uploading your image content to a web server or SAP NetWeaver MIME Repository.

Reasoning/Use Case:

The rationale is that this may not be the same team responsible for uploading content as are those who are writing Design Studio applications.  This method uses Base 64 URL encoding, which is supported now in most modern browser, including IE.

Steps to Implement:

1. Pick your image. For this example, I will use the SAP Logo: http://www.sap.com/content/sapcom/global/usa/en_us/_jcr_content/headerLogo/image.img.png
2. Find a Base64 Encoder tool.  There are many online free ones available that will take both image uploads and URLs.  For this example, I will use Free Online Base64 Encoder / Base64 Decoder Tool - Freeencoder.com.
3. Paste in the URL (or upload your image) and see that you get back a Base-64 encoded string.  Example of the SAP logo's encoding is as follows:
   
   

   iVBORw0KGgoAAAANSUhEUgAAAEIAAAAhCAYAAABtNH0cAAAEdklEQVR42uWYy28bVRSH5y9AXoOE/B/gZYWE5B0sWFhCqFtvaKGI4qJSHq3KVAkuKgg3RDSthGKoWrWLkBEkaRI38TR2HnUc4jhJHafGdpp342cbaicm6HDPhBnNeO7YY2PHlvyTPiWxzz33zuc7ntsyTG8GWp5fs8cZ8st+a0vI/MQI6Un/Q4CWRJKAub1VIEDLcWdHJgHT/aRAgJbCuVokAdMVKRCgZbgepUjAXA0VCCBi6AqDzbMNgcQe0IKvOwJpsPSvgXycHGcoC/z6CxXmnhVVrdW1Sa2Vw0V3gfUlwHQ7pjmnLjrCGhIwV4I5AiDWe6uQ2TsAvcFam3sDxPGI8UZIs965kFbUIuzENlSS+LN9sHBxVZ+yfBssIYHklc75Xcb+B1j7VqCaWHqigONFWO9mSXHyWqHes1nVvLje4l7azJaWgDnWvZQ2dgYhkz+oeDH8ynNg2vwK4tn90hfwe0xRz45tQLUx3wyr5lfR7i8vAfPWrXDKNkTfDfHMHrD8mgS3lFYIM12fB4Z9KGH+OVR28dhDPoZ9sE6XHH8moXmrzSUUvVRc8umTgHnnbjjFLaWoExns08BcnFRh7Y0A615Tve4M7Oj6JOV9UTAt8r6ma7hj/6Z+ULT1CXw1pV8C5l0igo9l6cZnn4KhnZi9MF4WrKMtlhbbQEwax46u0kUU9ddbd8hkZRIwb/+ymHSMr2t/wZGLc0xsgKlzFpgvPJpYe5bpt8KjpPoRvPmXNI4deUK/wKL+euuY897KJWDe6AomzTfm9D260nlAacZvyC75bEwBH81QLngXLDcXqb1MHTPCOPY+/ftJ3tvAjgtzl6sjVCcB86p9Msl8yoPTv1XRNzbrIs9yMg4x2qfot8BvETBc9FLfc3jXhLHYR6s/4pzZgkyOfstxiwlpDcw5vnoJQs6O5gmAOP2VPdOxHsexwzHq+8avJ4T3uYUd6u4qNVbXWeJuCA7X7v6fEjCfjOQJIGL+cQb4P9P6F3PnEcRT6m0bWH8u9cQa6mGsm5wsh6JVScA1/te/BhIwH7vyjM0FxRgvecHWGxYuqOQxW2PbsoNRRS/qjvJtCHWVhpsnT7PPye1wxlUjCZjTw3kClMLIeoTJK008lQM+Unp3OR7oO9qjcC74FMw/TIvrqqEEzEdDeQIg1lsLYDg3AuLfxdQjKIt6fO6YllCtpeYSSF7+0n3AfDgI5qs+yTw7EAHTZXIwIa8jhrP3weFegaOMOLeKU4O1l4B5zT6eZU7dA/5xCpopuCY1A/WRgHn9ykTC/P3D2m31ZA4co3Hgl1MKuLlt4aduEe8PKPmgjhIwb3b4Eo7RWM1EYC/mZD8VU7tHvwj52HpLwLx0ejjDnOgH83dTwAXK/29R5kUB2L7HwidPPTq3kfM+6aeF1jiVCHHMyf76SxByoi9HABGDbYhIIf887ltWYbnml+qwhoa8Fw1T25jmWFWf945KwqGIvXKLbwhHKqFZRRy5hGYU0RAJzSaiYRKaSURDJRyKaIbdcJlpcP4Fuicj4RNJZUgAAAAASUVORK5CYII=
   
   

4. In Design Studio, bring in an Image Component, or even a Button.  Either will work.
5. In the Properties panel for the component, find the Image property.  The trick is to create a Base64 URI that the browser will interpret as a mime-type.  For a PNG, the prefix is as follows:  data:image/png;base64,
6. Join the prefix with the encoded string like below:
   
   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAhCAYAAABtNH0cAAAEdklEQVR42uWYy28bVRSH5y9AXoOE/B/gZYWE5B0sWFhCqFtvaKGI4qJSHq3KVAkuKgg3RDSthGKoWrWLkBEkaRI38TR2HnUc4jhJHafGdpp342cbaicm6HDPhBnNeO7YY2PHlvyTPiWxzz33zuc7ntsyTG8GWp5fs8cZ8st+a0vI/MQI6Un/Q4CWRJKAub1VIEDLcWdHJgHT/aRAgJbCuVokAdMVKRCgZbgepUjAXA0VCCBi6AqDzbMNgcQe0IKvOwJpsPSvgXycHGcoC/z6CxXmnhVVrdW1Sa2Vw0V3gfUlwHQ7pjmnLjrCGhIwV4I5AiDWe6uQ2TsAvcFam3sDxPGI8UZIs965kFbUIuzENlSS+LN9sHBxVZ+yfBssIYHklc75Xcb+B1j7VqCaWHqigONFWO9mSXHyWqHes1nVvLje4l7azJaWgDnWvZQ2dgYhkz+oeDH8ynNg2vwK4tn90hfwe0xRz45tQLUx3wyr5lfR7i8vAfPWrXDKNkTfDfHMHrD8mgS3lFYIM12fB4Z9KGH+OVR28dhDPoZ9sE6XHH8moXmrzSUUvVRc8umTgHnnbjjFLaWoExns08BcnFRh7Y0A615Tve4M7Oj6JOV9UTAt8r6ma7hj/6Z+ULT1CXw1pV8C5l0igo9l6cZnn4KhnZi9MF4WrKMtlhbbQEwax46u0kUU9ddbd8hkZRIwb/+ymHSMr2t/wZGLc0xsgKlzFpgvPJpYe5bpt8KjpPoRvPmXNI4deUK/wKL+euuY897KJWDe6AomzTfm9D260nlAacZvyC75bEwBH81QLngXLDcXqb1MHTPCOPY+/ftJ3tvAjgtzl6sjVCcB86p9Msl8yoPTv1XRNzbrIs9yMg4x2qfot8BvETBc9FLfc3jXhLHYR6s/4pzZgkyOfstxiwlpDcw5vnoJQs6O5gmAOP2VPdOxHsexwzHq+8avJ4T3uYUd6u4qNVbXWeJuCA7X7v6fEjCfjOQJIGL+cQb4P9P6F3PnEcRT6m0bWH8u9cQa6mGsm5wsh6JVScA1/te/BhIwH7vyjM0FxRgvecHWGxYuqOQxW2PbsoNRRS/qjvJtCHWVhpsnT7PPye1wxlUjCZjTw3kClMLIeoTJK008lQM+Unp3OR7oO9qjcC74FMw/TIvrqqEEzEdDeQIg1lsLYDg3AuLfxdQjKIt6fO6YllCtpeYSSF7+0n3AfDgI5qs+yTw7EAHTZXIwIa8jhrP3weFegaOMOLeKU4O1l4B5zT6eZU7dA/5xCpopuCY1A/WRgHn9ykTC/P3D2m31ZA4co3Hgl1MKuLlt4aduEe8PKPmgjhIwb3b4Eo7RWM1EYC/mZD8VU7tHvwj52HpLwLx0ejjDnOgH83dTwAXK/29R5kUB2L7HwidPPTq3kfM+6aeF1jiVCHHMyf76SxByoi9HABGDbYhIIf887ltWYbnml+qwhoa8Fw1T25jmWFWf945KwqGIvXKLbwhHKqFZRRy5hGYU0RAJzSaiYRKaSURDJRyKaIbdcJlpcP4Fuicj4RNJZUgAAAAASUVORK5CYII=
   
   
7. Copy and paste your completed string into the Image property and find that the image now shows up within your Design Studio application without needing to upload an image anywhere.
   
   

Considerations:

Consider your lifecycle of your BI Application/Dashboard.  Of course, a long-term ideal place to host images would be on a web server, especially if the image would be referenced more than once.  However in today's age of rapid prototyping and short-term usages, quick and dirty methods like this suffice just fine for proof-of-concepts during infancy of projects.

Consider the file size.  Encoding an image in Base64 does take up additional space (approximately 1.37 times the size of a raw binary. For small PNGs and GIFs, this is not a problem, but don't expect to post your entire Flickr album inside a DS App!