วิธีที่ 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: ภาพตัวอย่าง |
Save the photo above to your local.
บันทึกภาพด้านบนเป็นของคุณ |
Go to http://jpillora.com/base64-encoder/
Drag the photo saved previously into the website above.
ลากรูปภาพที่บันทึกไว้ก่อนหน้านี้ลงในเว็บไซต์ด้านบน |
Copy the code generated.
คัดลอกรหัสที่สร้าง |
Go to your Userview Builder, edit the HTML Page.
ไปที่ตัวสร้าง Userview ของคุณแก้ไขเมนู Userview - Rich Text Editor |
From the content, in the View tab, click on Source Code.
คลิกที่แหล่ง HTML |
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/ |
วิธีที่ 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 เพื่อโฮสต์ภาพโดยเฉพาะ |
In the webapps folder, create a new folder called images.
ในโฟลเดอร์ webapps สร้างโฟลเดอร์ใหม่ที่เรียกว่ารูปภาพ |
Put the image file hi.png into the new folder.
วางไฟล์รูปภาพ hi.png ลงในโฟลเดอร์ใหม่ |
Go to your Userview Builder, edit the Userview Menu - Rich Text Editor.
ไปที่ตัวสร้าง Userview ของคุณแก้ไขเมนู Userview - Rich Text Editor |
Click on HTML Source.
คลิกที่แหล่ง HTML |
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"/> |