Skip to Content
Author's profile photo Michael Howles

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


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:
  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 –
  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:


  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:


  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.



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!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Arijit Das
      Arijit Das

      Did not try it, but looks interesting !!!

      Author's profile photo Former Member
      Former Member

      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.


      Author's profile photo Karol Kalisz
      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.


      Author's profile photo Former Member
      Former Member


      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?


      Author's profile photo Karol Kalisz
      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.

      Author's profile photo Former Member
      Former Member

      Hello Karol,

      thank you for your description! I implemented this scenario for displaying exception icons via CSS file as Victor Gabriel describes also in 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,


      Author's profile photo Deepak Aswale
      Deepak Aswale


      Is there any way i can insert GIF image in Design Studio Pannel

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Yes, use CSS.  Google for CSS rule "background-image"

      Author's profile photo Jon Fortner
      Jon Fortner



      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.

      Author's profile photo Angelo Sagnori
      Angelo Sagnori

      Hi Mike,

      Is there any way to hide a folder on the BO server without creating design access panel 1.6 errors? or the best way is still to put the files on the tomcat server?


      Thanks in advanced.