配置屬性直接定義為「自適應影像庫」管理的IMG元素上的屬性。 每個影像都可以有其專屬的屬性集。
選填。
影像伺服所提供影像的URL。 如果URL不存在,程式庫會使用在src
屬性中設定的值做為回落。 此屬性可支援互動式影像庫從不同位置管理的初始影像和動態影像。
範例
<img data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">
如果設定data-src
,則src
為選用項目,且可包含您要新增的任何URL。 例如,它可包含資料庫所使用之相同影像伺服影像的URL。 或者,它可包含GIF預留位置,或甚至資料URI,以避免啟動時出現額外的伺服器往返。
如果未設定data-src
,則src
為必填項目,且必須包含影像伺服所用影像的URL。
範例
使用src
屬性的資料URI和data-src
屬性的影像伺服URL:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">
以逗號分隔的中斷點清單,並可選地後面加上冒號(:
)和影像伺服命令或影像預設集。 每個斷點都是以邏輯CSS像素定義的影像寬度值。 程式庫會從清單中載入最大值的影像,並在用戶端上縮放影像,以符合執行時期的CSS影像寬度。 (如果您在高密度螢幕上工作,從伺服器載入的影像轉譯代表斷點值乘以裝置的像素比例)。
對於清單中的任何斷點,可以定義一個或多個影像服務命令或影像預設集名稱。 這些額外參數只會套用至影像,以防此特定的斷點目前處於作用中。
除了那些影響響應影像大小的視圖命令(如wid=
、hei=
或scl=
)外,您可以使用任何受支援的「影像服務」命令。 影像預設集的限制也相同:與自適應影像庫一起使用的影像預設集不得包含此類命令。
多個影像伺服命令或影像預設集名稱會以" &
"字元分隔。 如果「影像伺服」命令的值中有逗號,則會以%2C
取代此類逗號。 「影像預設集」名稱會以貨幣符號($
)包住。
範例
僅使用中斷點
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">
使用影像伺服命令
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:op_sharpen=1,720:resMode=sharp2&op_usm=0.9%2C1.0%2C8%2C0">
使用影像預設集
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">
使用影像預設集和影像伺服命令
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">
AEM 6.4和更新版本以及Dynamic Media Viewers 5.9和更新版本提供下列兩種智慧型裁切模式:
要使用智慧裁切模式,請將data-mode
屬性設定為smart crop
。
範例
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset"
data-mode="smartcrop">
當斷點變更時,關聯的映像元素在運行時間中調度s7responsiveViewer
事件。
responsiveImage.addEventListener("s7responsiveViewer", function (event) {
var s7event = event.s7responsiveViewerEvent;
if(s7event.type == "breakpointchanged") {
console.log("New width: " + s7event.width);
console.log("Old width: " + s7event.oldWidth);
}
});