| Table of Contents |
|---|
Method 1: Data URIs
| Thai |
|---|
วิธีที่ 1: URI ข้อมูล |
| English |
|---|
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. |
| Thai |
|---|
เราสามารถโฮสต์รูปภาพ "inline" ภายในฟอร์ม (เช่น Custom HTML) หรือเมนู Userview (เช่น Rich Text Editor) ตัวอย่างเช่นเราต้องการแสดงภาพด้านล่างใน Rich Text Editor ใน Userview Builder |
Figure 1: Sample photo
| Thai |
|---|
รูปที่ 1: ภาพตัวอย่าง |
Save the photo above to your local.
Thai บันทึกภาพด้านบนเป็นของคุณ
Go to http://jpillora.com/base64-encoder/
Thai Drag the photo saved previously into the website above.
Thai ลากรูปภาพที่บันทึกไว้ก่อนหน้านี้ลงในเว็บไซต์ด้านบน
Copy the code generated.
Thai คัดลอกรหัสที่สร้าง
Go to your Userview Builder, edit the HTML Page.
Thai ไปที่ตัวสร้าง Userview ของคุณแก้ไขเมนู Userview - Rich Text Editor
From the content, in the View tab, click on Source Code.
Thai คลิกที่แหล่ง HTML
Add the img tag into the HTML Source Editor and put in the code copied earlier into the src attribute.
Thai เพิ่มแท็ก img ลงใน HTML Source Editor และใส่รหัสที่คัดลอกไว้ก่อนหน้านี้ลงในแอตทริบิวต์ src
Code Block <img src="PASTE THE CODE HERE"/>
Reference: https://css-tricks.com/data-uris/
| Thai |
|---|
อ้างอิง: https://css-tricks.com/data-uris/ |
Method 2: Hosting the file from your web server
| Thai |
|---|
วิธีที่ 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.
| Thai |
|---|
สมมติว่าคุณกำลังทำงานบนเว็บเซิร์ฟเวอร์แอปพลิเคชั่นเริ่มต้น Tomcat เราสามารถสร้างโฟลเดอร์ใหม่ในโฟลเดอร์ webapps เพื่อโฮสต์ภาพโดยเฉพาะ |
In the webapps folder, create a new folder called images.
Thai ในโฟลเดอร์ webapps สร้างโฟลเดอร์ใหม่ที่เรียกว่ารูปภาพ
Put the image file hi.png into the new folder.
Thai วางไฟล์รูปภาพ hi.png ลงในโฟลเดอร์ใหม่
Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
Thai ไปที่ตัวสร้าง Userview ของคุณแก้ไขเมนู Userview - Rich Text Editor
Click on HTML Source.
Thai คลิกที่แหล่ง HTML
Add the img tag into the HTML Source Editor and construct the URL path to the image.
Thai เพิ่มแท็ก img ลงใน HTML Source Editor และสร้างเส้นทาง URL ไปยังรูปภาพ
Code Block <img src="/images/hi.png"/>