配置屬性直接定義為響應影像庫管理的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
必需,並且必須包含Image Serving所用映像的URL。
範例
使用資料URI src
屬性和影像服務URL data-src
屬性:
<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$">
以下兩種智慧裁剪模式在AEM6.4及更高版本和Dynamic Media觀眾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);
}
});