Page History

Method 1: Data URIs

We can host the images "inline", inside the form (i.e. 自定义HTML) or Userview menu (i.e. 富文本编辑器) itself.

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

Image Removed

Figure 1: Sample photo

方法1：  数据URI

我们可以在表单（即自定义HTML）或用户视图菜单（即富文本编辑器）内部托管“内联”图像。

例如，我们想要在UserView Builder中的富文本编辑器中显示下面的图像。  

Image Added

图1：示例照片

1. 将上面的照片保存到您的本地。
2. 转到 
3. Save the photo above to your local.
4. Go to http://jpillora.com/base64-encoder/
5. Drag the photo saved previously into the website above.
6. 将之前保存的照片拖到上面的网站中。
7. 复制生成的代码。Copy the code generated.
   
8. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
9. Click on HTML Source.
10. 转到您的UserView生成器，编辑用户视图菜单 - 富文本编辑器。
11. 点击HTML Source。

12. 将img 标签添加到  HTML源代码编辑器中 ，并将之前复制的代码放入  src 属性中。Add the img tag into the HTML Source Editor and put in the code copied earlier into the src attribute.

    Code Block
    <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.

方法2：从您的Web服务器托管文件

假设您在默认的应用程序Web服务器Tomcat上运行，我们可以在webapps 文件夹中创建一个新文件  夹来专门托管图像。

1. 在  webapps 文件夹中，创建一个名为images的新文件夹  。
   Image Added
2. 将图像文件  hi.png 放入新文件夹。
3. 转到您的UserView生成器，编辑用户视图菜单 - 富文本编辑器。
4. 点击HTML Source。

5. 将img 标签添加  到  HTML源代码编辑器中， 并构建图像的URL路径。

6. In the webapps folder, create a new folder called images.
   Image Removed
7. Put the image file hi.png into the new folder.
8. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
9. Click on HTML Source.

10. Add the img tag into the HTML Source Editor and construct the URL path to the image.

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

...