How to host image in Form/Userview

There are basically 2 easy ways of achieving it.

Method 1: Data URIs

We can host the images "inline", inside the forum or userview menu 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"/>