Versions Compared

Old Version 1

changes.mady.by.user Justin

Saved on

compared with

New Version Current

changes.mady.by.user PT

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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: ภาพตัวอย่าง

  1. Save the photo above to your local.

    Thai

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

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

    Thai

    ไปที่ http://jpillora.com/base64-encoder/

  3. Drag the photo saved previously into the website above.

    Thai

    ลากรูปภาพที่บันทึกไว้ก่อนหน้านี้ลงในเว็บไซต์ด้านบน

  4. Copy the code generated.

    Thai

    คัดลอกรหัสที่สร้าง


    Image Modified

  5. Go to your Userview Builder, edit the

    Userview Menu

    HTML Page.

    Thai

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

    .
  6. Click on HTML Source.

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

    Thai

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

  9. 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"/>

    Image RemovedImage Added


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 เพื่อโฮสต์ภาพโดยเฉพาะ

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

    Thai

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


    Image Modified

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

    Thai

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

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

    Thai

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

  4. Click on HTML Source.

    Thai

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

  5. 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"/>

 

...