Method 1: Data URIs

We can host the images "inline", inside the form (i.e. HTML กำหนดเอง (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.

    <img src="PASTE THE CODE HERE"/>

     

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.

    <img src="/images/hi.png"/>

 

  • No labels