Class ImageComponent
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
รูปภาพคอมโพเนนต์
คอมโพเนนต์รูปภาพที่เพิ่มลงในรายการตารางกริดได้
พร้อมใช้งานสำหรับส่วนเสริมของ Google Workspace และแอป Google Chat
const ImageComponent = CardService.newImageComponent()
.setImageUrl('http://imageurl.ca')
.setAltText('YOUR ALT TEXT')
.setCropStyle(CardService.newImageCropStyle())
.setBorderStyle(CardService.newBorderStyle());
เอกสารประกอบโดยละเอียด
setAltText(altText)
ตั้งค่าข้อความแสดงแทนของรูปภาพ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
altText | String | alt_text ที่จะตั้งค่าสำหรับรูปภาพ |
รีเทิร์น
ImageComponent — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setBorderStyle(borderStyle)
ตั้งค่าลักษณะเส้นขอบที่ใช้กับรูปภาพ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
borderStyle | BorderStyle | ออบเจ็กต์ BorderStyle ที่จะใช้ |
รีเทิร์น
ImageComponent — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setCropStyle(imageCropStyle)
กำหนดรูปแบบการครอบตัดสำหรับรูปภาพ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
imageCropStyle | ImageCropStyle | ออบเจ็กต์ ImageCropStyle ที่จะนําไปใช้ |
รีเทิร์น
ImageComponent — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setImageUrl(url)
ตั้งค่า URL ของรูปภาพ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
url | String | URL |
รีเทิร์น
ImageComponent — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 2025-07-26 UTC"],[[["\u003cp\u003eThe \u003ccode\u003eImageComponent\u003c/code\u003e allows you to add images to grid items within Google Workspace Add-ons and Google Chat apps.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize the image with methods to set the alternative text, border style, crop style, and URL.\u003c/p\u003e\n"],["\u003cp\u003eAll customization methods (\u003ccode\u003esetAltText\u003c/code\u003e, \u003ccode\u003esetBorderStyle\u003c/code\u003e, \u003ccode\u003esetCropStyle\u003c/code\u003e, \u003ccode\u003esetImageUrl\u003c/code\u003e) return the \u003ccode\u003eImageComponent\u003c/code\u003e object for chaining multiple operations.\u003c/p\u003e\n"],["\u003cp\u003eAn \u003ccode\u003eImageComponent\u003c/code\u003e can be created using \u003ccode\u003eCardService.newImageComponent()\u003c/code\u003e, which provides methods for customization.\u003c/p\u003e\n"]]],[],null,["# Class ImageComponent\n\nImageComponent\n\nAn image component that can be added to grid items.\n\nAvailable for Google Workspace add-ons and Google Chat apps.\n\n```javascript\nconst ImageComponent = CardService.newImageComponent()\n .setImageUrl('http://imageurl.ca')\n .setAltText('YOUR ALT TEXT')\n .setCropStyle(CardService.newImageCropStyle())\n .setBorderStyle(CardService.newBorderStyle());\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|---------------------------------------------------------------|---------------------|---------------------------------------------|\n| [setAltText(altText)](#setAltText(String)) | [ImageComponent](#) | Sets the alternative text of the image. |\n| [setBorderStyle(borderStyle)](#setBorderStyle(BorderStyle)) | [ImageComponent](#) | Sets the border style applied to the image. |\n| [setCropStyle(imageCropStyle)](#setCropStyle(ImageCropStyle)) | [ImageComponent](#) | Sets the crop style for the image. |\n| [setImageUrl(url)](#setImageUrl(String)) | [ImageComponent](#) | Sets the URL of the image. |\n\nDetailed documentation\n----------------------\n\n### `set``Alt``Text(altText)`\n\nSets the alternative text of the image.\n\n#### Parameters\n\n| Name | Type | Description |\n|-------------|----------|------------------------------------|\n| `alt``Text` | `String` | The alt_text to set for the image. |\n\n#### Return\n\n\n[ImageComponent](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Border``Style(borderStyle)`\n\nSets the border style applied to the image.\n\n#### Parameters\n\n| Name | Type | Description |\n|-----------------|-----------------------------------------------------------------|----------------------------------|\n| `border``Style` | [BorderStyle](/apps-script/reference/card-service/border-style) | The BorderStyle object to apply. |\n\n#### Return\n\n\n[ImageComponent](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Crop``Style(imageCropStyle)`\n\nSets the crop style for the image.\n\n#### Parameters\n\n| Name | Type | Description |\n|----------------------|------------------------------------------------------------------------|-------------------------------------|\n| `image``Crop``Style` | [ImageCropStyle](/apps-script/reference/card-service/image-crop-style) | The ImageCropStyle object to apply. |\n\n#### Return\n\n\n[ImageComponent](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Image``Url(url)`\n\nSets the URL of the image.\n\n#### Parameters\n\n| Name | Type | Description |\n|-------|----------|-------------|\n| `url` | `String` | The URL. |\n\n#### Return\n\n\n[ImageComponent](#) --- This object, for chaining."]]
