Method 1: Data URIs

วิธีที่ 1: URI ข้อมูล

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.

เราสามารถโฮสต์รูปภาพ "inline" ภายในฟอร์ม (เช่น Custom HTML) หรือเมนู Userview (เช่น Rich Text Editor)

ตัวอย่างเช่นเราต้องการแสดงภาพด้านล่างใน Rich Text Editor ใน Userview Builder

Figure 1: Sample photo

รูปที่ 1: ภาพตัวอย่าง

  1. Save the photo above to your local.

    บันทึกภาพด้านบนเป็นของคุณ

  2. Go to http://jpillora.com/base64-encoder/

    ไปที่ 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 HTML Page.

    ไปที่ตัวสร้าง Userview ของคุณแก้ไขเมนู Userview - Rich Text Editor

  6. From the content, in the View tab, click on Source Code.

    คลิกที่แหล่ง HTML

  7. Add the img tag into the HTML Source Editor and put in the code copied earlier into the src attribute.

    เพิ่มแท็ก img ลงใน HTML Source Editor และใส่รหัสที่คัดลอกไว้ก่อนหน้านี้ลงในแอตทริบิวต์ src

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


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

อ้างอิง: https://css-tricks.com/data-uris/

Method 2: Hosting the file from your web server

วิธีที่ 2: การโฮสต์ไฟล์จากเว็บเซิร์ฟเวอร์ของคุณ

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.

สมมติว่าคุณกำลังทำงานบนเว็บเซิร์ฟเวอร์แอปพลิเคชั่นเริ่มต้น Tomcat เราสามารถสร้างโฟลเดอร์ใหม่ในโฟลเดอร์ webapps เพื่อโฮสต์ภาพโดยเฉพาะ

  1. In the webapps folder, create a new folder called images.

    ในโฟลเดอร์ webapps สร้างโฟลเดอร์ใหม่ที่เรียกว่ารูปภาพ


  2. Put the image file hi.png into the new folder.

    วางไฟล์รูปภาพ hi.png ลงในโฟลเดอร์ใหม่

  3. Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.

    ไปที่ตัวสร้าง Userview ของคุณแก้ไขเมนู Userview - Rich Text Editor

  4. Click on HTML Source.

    คลิกที่แหล่ง HTML

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

    เพิ่มแท็ก img ลงใน HTML Source Editor และสร้างเส้นทาง URL ไปยังรูปภาพ

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