Come join us on November 27-29, 2018 at the Gartner Application Strategies & Solutions Summit 2018 in Las Vegas, USA.

Skip to end of metadata
Go to start of metadata

Method 1: Data URIs

We can host the images "inline", inside the form (i.e. Custom HTML) or Userview menu (i.e. Rich Text Editor) itself.

For example, we want to show the image below in a Rich Text Editor in Userview Builder.

Figure 1: Sample photo

  1. Save the photo above to your local.
  2. Go to http://jpillora.com/base64-encoder/
  3. Drag the photo saved previously into the website above.
  4. Copy the code generated.
  5. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
  6. Click on HTML Source.
  7. Add the img tag into the HTML Source Editor and put in the code copied earlier into the src attribute.

Reference: https://css-tricks.com/data-uris/

Method 2: Hosting the file from your web server

Assuming that you are running on the default application web server, Tomcat, we can create a new folder in the webapps folder to specifically host images.

  1. In the webapps folder, create a new folder called images.
  2. Put the image file hi.png into the new folder.
  3. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
  4. Click on HTML Source.
  5. Add the img tag into the HTML Source Editor and construct the URL path to the image.

 

 

  • No labels