Skip to Content

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.

    /wp-content/uploads/2013/12/base64example_350305.png

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!

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. Matus Knut

    Hello Michael,

    could you help me?

    I know that e.g. for Web Intelligence reports images are loaded to report from images folder located e.g. on linux installation of BO BI Platform server on path …./sap_bobj/enterprise_xi40/images/

    Is true that if developer is needed to add image to Design Studio app, he is uploading this file from own client machine to specific folder on BO BI Platform server? If yes, to which folder on server?

    We are trying to somehow merge locations for WebI and Design Studio to one folder.

    Thanks.

    (0) 
    1. Karol Kalisz

      Hi Matus,

      I will try… images in designs studio can be loaded from the BOE repository (means someone has to upload them), but the folder is up to you. Of course the user has to have access rights on the images.

      Alternatively, you can also maintain pure http:// links directly.

      Karol

      (0) 
      1. Matus Knut

        Hello,

        sorry for next question, but I am not so familiar with DS.

        How it can be take folder where I can upload image on BI server if I am working from client?

        Thanks.

        (0) 
        1. Karol Kalisz

          Hi, as of release 1.4, the image upload must be made on the platform directly, not with design studio. the procedure is, the designer of design studio applications must provide the images in some folder on the platform first, and then those can be included in the application.

          in release 1.5 there will be an “application upload” function which uploads the application together with all images.

          (0) 
  2. Bálint Almási

    Hello Karol,

    thank you for your description! I implemented this scenario for displaying exception icons via CSS file as Victor Gabriel describes also in http://scn.sap.com/docs/DOC-60543. But when I am trying to print my cockpit the icons disappear. I am using DS 1.5 with BOE.

    Is that correct that the Base64 format generally does not support printing? What is your experience with this regard? Can I overcome this somehow?

    Can I reference uploaded images from the platform within CSS instead? Maybe it would be easier with DS 1.6 where CSS is integrated in DS but I do not have experience with 1.6 yet.

    Thanks and regards,

    Balint

    (0) 
  3. Jon Fortner

     

    Mike,

    Does this also work for SAP Dashboards? We are getting errors now uploading a SWF based dashboard that uses an image component in 4.2 SP4. We have to remove the Image Component to make it work. Error: Could not generate the flash file (SWF). the cause is not known.

    (0) 

Leave a Reply