-
Notifications
You must be signed in to change notification settings - Fork 12
/
chunk-MVXSXOXX.js
81 lines (71 loc) · 41.7 KB
/
chunk-MVXSXOXX.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import{c as ae,d as re}from"./chunk-ATMYKYHT.js";import{c as ie}from"./chunk-OKWB2EJ4.js";import{a as _,d as ne}from"./chunk-E4FB6IMX.js";import"./chunk-ENUDN6ZE.js";import{f as N,g as L,i as E,j as te}from"./chunk-MVBTB2OL.js";import"./chunk-QH77Q77Q.js";import{B as Y,D as I,Eb as ee,Gb as k,Hc as T,Ib as B,Jb as P,K,Rb as H,rb as X,sb as C}from"./chunk-SBXTKZGS.js";import{Aa as $,Ab as V,Ba as x,Ca as c,Eb as Q,Fb as d,Tb as t,Tc as J,Ub as n,Vb as o,Yc as w,_ as U,ac as z,f as Z,ga as D,jc as h,kb as p,kc as f,l as g,lb as y,lc as F,nc as e,qa as u,ra as v,wc as q}from"./chunk-WVUROUXZ.js";import"./chunk-RKLIRILV.js";var Se=["imageRef"];function me(r){return typeof r=="number"||/^(\d)+(px)?$/.test(r)}function ge(r){return r[0]==="/"?r.slice(1):r}var le=({src:r})=>r;function O(r){return({src:i,width:G})=>{let m=K(G)?"":`?x-oss-process=image/resize,w_${G}`;return`${r}/${ge(i)}${m}`}}var oe="imageExperimental",ze=[16,32,48,64,96,128,256,384,640,750,828,1080,1200,1920,2048,3840],A=(()=>{let i=class i{constructor(m,a,l){this.cdr=m,this.nzConfigService=a,this.imagePreloadService=l,this._nzModuleName=oe,this.nzSrc="",this.nzAlt="",this.nzWidth="auto",this.nzHeight="auto",this.nzSrcLoader=le,this.nzAutoSrcset=!1,this.nzPriority=!1,this.nzFallback=null,this.nzPlaceholder=null,this.nzDisablePreview=!1,this.src="",this.width="auto",this.height="auto",this.srcset="",this.destroy$=new Z,this.reloadDisposeHandler=()=>{},this.nzConfigService.getConfigChangeEventForComponent(oe).pipe(U(this.destroy$)).subscribe(()=>{this.composeImageAttrs(),this.cdr.markForCheck()})}ngOnInit(){this.nzPriority&&this.preload()}ngOnChanges(m){let{nzLoader:a,nzSrc:l,nzOptimize:s}=m;(l||a||s)&&this.composeImageAttrs()}ngOnDestroy(){this.reloadDisposeHandler(),this.destroy$.next(),this.destroy$.complete()}preload(){this.reloadDisposeHandler=this.imagePreloadService.addPreload({src:this.src,srcset:this.srcset})}optimizable(){return this.nzAutoSrcset?!me(this.nzWidth)||!me(this.nzHeight)?(I('When using "nzAutoSrcset" you should use a fixed size width and height, for more information please refer to CLS (https://web.dev/cls/) performance metrics'),!1):this.nzSrc.endsWith(".svg")?(I("SVG does not need to be optimized"),!1):this.nzSrc.startsWith("data:")?(I("Data URLs cannot be optimized"),!1):!0:!1}composeImageAttrs(){let m=this.getLoader();if(!this.optimizable()){this.src=m({src:this.nzSrc}),this.width=this.nzWidth,this.height=this.nzHeight;return}this.width=typeof this.nzWidth=="number"?this.nzWidth:parseInt(this.nzWidth,10),this.height=typeof this.nzHeight=="number"?this.nzHeight:parseInt(this.nzHeight,10);let a=this.convertWidths(this.width,ze);this.src=m({src:this.nzSrc,width:a[0]}),this.srcset=a.map((l,s)=>`${m({src:this.nzSrc,width:l})} ${s+1}x`).join(", ")}getLoader(){return this.nzSrcLoader||le}convertWidths(m,a){let l=[...a].sort((s,S)=>s-S);return[...new Set([m,m*2].map(s=>l.find(S=>S>=s)||s))]}};i.\u0275fac=function(a){return new(a||i)(y(J),y(X),y(ee))},i.\u0275cmp=u({type:i,selectors:[["nz-image"]],viewQuery:function(a,l){if(a&1&&h(Se,5),a&2){let s;f(s=F())&&(l.imageRef=s.first)}},inputs:{nzSrc:"nzSrc",nzAlt:"nzAlt",nzWidth:"nzWidth",nzHeight:"nzHeight",nzSrcLoader:"nzSrcLoader",nzAutoSrcset:[2,"nzAutoSrcset","nzAutoSrcset",w],nzPriority:[2,"nzPriority","nzPriority",w],nzFallback:"nzFallback",nzPlaceholder:"nzPlaceholder",nzDisablePreview:[2,"nzDisablePreview","nzDisablePreview",w]},exportAs:["nzImage"],standalone:!0,features:[V,$,q],decls:2,vars:9,consts:[["imageRef",""],["nz-image","",3,"nzSrc","nzSrcset","nzDisablePreview","nzFallback","nzPlaceholder"]],template:function(a,l){a&1&&o(0,"img",1,0),a&2&&(d("nzSrc",l.src)("nzSrcset",l.srcset)("nzDisablePreview",l.nzDisablePreview)("nzFallback",l.nzFallback)("nzPlaceholder",l.nzPlaceholder),Q("width",l.width)("height",l.height)("srcset",l.srcset)("alt",l.nzAlt||null))},dependencies:[ae],encapsulation:2,changeDetection:0});let r=i;return g([C()],r.prototype,"nzSrcLoader",void 0),g([C()],r.prototype,"nzAutoSrcset",void 0),g([C()],r.prototype,"nzFallback",void 0),g([C()],r.prototype,"nzPlaceholder",void 0),g([C()],r.prototype,"nzDisablePreview",void 0),r})(),de=(()=>{let i=class i{};i.\u0275fac=function(a){return new(a||i)},i.\u0275mod=v({type:i}),i.\u0275inj=D({});let r=i;return r})();var se=[de,ne,ie,re];var R=(()=>{let i=class i{constructor(){this.src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",this.loader=O("https://zos.alipayobjects.com/rmsportal")}};i.\u0275fac=function(a){return new(a||i)},i.\u0275cmp=u({type:i,selectors:[["nz-demo-experimental-image-auto-srcset"]],decls:1,vars:2,consts:[["nzWidth","200","nzHeight","200","nzAutoSrcset","",3,"nzSrc","nzSrcLoader"]],template:function(a,l){a&1&&o(0,"nz-image",0),a&2&&d("nzSrc",l.src)("nzSrcLoader",l.loader)},dependencies:[A],encapsulation:2});let r=i;return r})();var W=(()=>{let i=class i{constructor(){this.src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"}};i.\u0275fac=function(a){return new(a||i)},i.\u0275cmp=u({type:i,selectors:[["nz-demo-experimental-image-preloading"]],decls:1,vars:1,consts:[["nzWidth","200","nzHeight","200","nzPriority","",3,"nzSrc"]],template:function(a,l){a&1&&o(0,"nz-image",0),a&2&&d("nzSrc",l.src)},dependencies:[A],encapsulation:2});let r=i;return r})();var M=(()=>{let i=class i{constructor(){this.src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",this.loader=O("https://zos.alipayobjects.com/rmsportal")}};i.\u0275fac=function(a){return new(a||i)},i.\u0275cmp=u({type:i,selectors:[["nz-demo-experimental-image-src-loader"]],decls:1,vars:2,consts:[["nzWidth","200","nzHeight","200",3,"nzSrc","nzSrcLoader"]],template:function(a,l){a&1&&o(0,"nz-image",0),a&2&&d("nzSrc",l.src)("nzSrcLoader",l.loader)},dependencies:[A],encapsulation:2});let r=i;return r})();var ce=(()=>{let i=class i{constructor(){this.expanded=!1}goLink(m){window&&(window.location.hash=m)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(m=>m.expandCode(this.expanded))}};i.\u0275fac=function(a){return new(a||i)},i.\u0275cmp=u({type:i,selectors:[["nz-demo-experimental-image"]],viewQuery:function(a,l){if(a&1&&h(E,5),a&2){let s;f(s=F())&&(l.codeBoxes=s)}},decls:639,vars:16,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzClick","nzAffix"],["nzHref","#components-experimental-image-demo-preloading","nzTitle","\u4F18\u5148\u52A0\u8F7D"],["nzHref","#components-experimental-image-demo-src-loader","nzTitle","\u4F7F\u7528 Src Loader"],["nzHref","#components-experimental-image-demo-auto-srcset","nzTitle","\u81EA\u52A8\u586B\u5145 srcset"],["nzHref","#api","nzTitle","API"],[1,"markdown"],[1,"subtitle"],[1,"widget"],["aria-label","Edit this page on Github","href","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/doc/index.zh-CN.md","target","_blank","rel","noopener noreferrer",1,"edit-button"],["nz-icon","","nzType","edit"],[2,"border-color","#faad14"],["id","\u4F55\u65F6\u4F7F\u7528"],["onclick","window.location.hash = '\u4F55\u65F6\u4F7F\u7528'",1,"anchor"],["href","/components/image/zh"],["href","https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes","target","_blank","rel","noopener"],[1,"language-ts"],[1,"token","keyword"],[1,"token","punctuation"],[1,"token","string"],["nz-icon","","nzType","appstore","nz-tooltip","","nzTooltipTitle","\u5C55\u5F00\u5168\u90E8\u4EE3\u7801",1,"code-box-expand-trigger",3,"click"],["nz-row","",3,"nzGutter"],["nz-col","",3,"nzSpan"],["nzTitle","\u4F18\u5148\u52A0\u8F7D","nzSelector","nz-demo-experimental-image-preloading","nzGenerateCommand","ng g ng-zorro-antd:experimental-image-preloading <name>","nzComponentName","NzDemoExperimentalImagePreloadingComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframeHeight","nzHref"],["demo",""],["intro",""],["href","https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content","target","_blank","rel","noopener"],["href","https://web.dev/preload-responsive-images/","target","_blank","rel","noopener"],[1,"language-html"],[1,"token","tag"],[1,"token","attr-name"],[1,"token","attr-value"],["nzTitle","\u4F7F\u7528 Src Loader","nzSelector","nz-demo-experimental-image-src-loader","nzGenerateCommand","ng g ng-zorro-antd:experimental-image-src-loader <name>","nzComponentName","NzDemoExperimentalImageSrcLoaderComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframeHeight","nzHref"],["href","https://web.dev/cls/","target","_blank","rel","noopener"],[1,"token","operator"],[1,"token","function"],[1,"token","class-name"],["nzTitle","\u81EA\u52A8\u586B\u5145 srcset","nzSelector","nz-demo-experimental-image-auto-srcset","nzGenerateCommand","ng g ng-zorro-antd:experimental-image-auto-srcset <name>","nzComponentName","NzDemoExperimentalImageAutoSrcsetComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframeHeight","nzHref"],["href","https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset","target","_blank","rel","noopener"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","nz-image"],[1,"api-type-label","component"],["onclick","window.location.hash = 'nz-image'",1,"anchor"],["id","nzimagesrcloader"],["onclick","window.location.hash = 'nzimagesrcloader'",1,"anchor"],["id","\u6CE8\u610F"],["onclick","window.location.hash = '\u6CE8\u610F'",1,"anchor"],["id","nzsrcloader"],["onclick","window.location.hash = 'nzsrcloader'",1,"anchor"],["spellcheck","true",1,"token","comment"],["id","\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u9884\u52A0\u8F7D\u56FE\u7247"],["onclick","window.location.hash = '\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u9884\u52A0\u8F7D\u56FE\u7247'",1,"anchor"],["href","https://nextjs.org/docs/basic-features/image-optimization","target","_blank","rel","noopener"]],template:function(a,l){a&1&&(t(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),z("nzClick",function(S){return l.goLink(S)}),o(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5),n()(),t(7,"section",6)(8,"h1"),e(9,"Image"),t(10,"span",7),e(11,"\u56FE\u7247"),n(),o(12,"span",8),t(13,"a",9),o(14,"span",10),n()(),t(15,"section",6),c(),t(16,"blockquote",11)(17,"p"),e(18,"NG-ZORRO \u5B9E\u9A8C\u6027\u529F\u80FD\u662F\u6307\u5DF2\u53D1\u5E03\u4F46\u4E0D\u7A33\u5B9A\u6216\u8005\u8FD8\u672A\u51C6\u5907\u597D\u7528\u4E8E\u751F\u4EA7\u73AF\u5883\u7684\u529F\u80FD\u3002"),n(),t(19,"p"),e(20,"\u5F00\u53D1\u8005\u6216\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u5728\u6B63\u5F0F\u53D1\u5E03\u524D\u4F7F\u7528\u8FD9\u4E9B\u529F\u80FD\uFF0C\u4F46\u662F\u6BCF\u6B21\u53D1\u5E03\u7248\u672C\u65F6\u90FD\u53EF\u80FD\u5B58\u5728 "),t(21,"strong"),e(22,"breaking changes"),n(),e(23,"\u3002"),n()(),t(24,"h2",12)(25,"span"),e(26,"\u4F55\u65F6\u4F7F\u7528"),n(),t(27,"a",13),e(28,"#"),n()(),t(29,"ul")(30,"li"),e(31,"\u9700\u8981\u6D4F\u89C8\u5668\u4F18\u5148\u52A0\u8F7D\u56FE\u7247\u65F6\uFF08\u9700\u8981\u5728 SSR \u4E0B\u5904\u7406\uFF09\u3002"),n(),t(32,"li"),e(33,"\u9700\u8981\u5BF9\u9AD8\u6E05\u663E\u793A\u5668\uFF08\u5982\u89C6\u7F51\u819C\u5C4F\uFF09\u4F18\u5316\u65F6\u3002"),n(),t(34,"li"),e(35,"\u4F7F\u7528\u56FE\u7247 CDN \u670D\u52A1\u65F6\u3002"),n(),t(36,"li"),e(37,"\u4EE5\u53CA "),t(38,"a",14),e(39,"Image documentation"),n(),e(40," \u4E2D\u7684\u529F\u80FD"),n(),t(41,"li"),e(42,"\u4E0B\u4E00\u6B65\u8BA1\u5212"),t(43,"ul")(44,"li"),e(45,"\u6DFB\u52A0 "),t(46,"a",15),e(47,"sizes"),n(),e(48," \u5C5E\u6027\u53CA\u54CD\u5E94\u5F0F\u7684\u652F\u6301"),n()()()(),t(49,"pre",16)(50,"code")(51,"span",17),e(52,"import"),n(),e(53," "),t(54,"span",18),e(55,"{"),n(),e(56," NzImageModule "),t(57,"span",18),e(58,"}"),n(),e(59," "),t(60,"span",17),e(61,"from"),n(),e(62," "),t(63,"span",19),e(64,"'ng-zorro-antd/experimental/image'"),n(),t(65,"span",18),e(66,";"),n()()(),x(),n(),t(67,"h2")(68,"span"),e(69,"\u4EE3\u7801\u6F14\u793A"),n(),t(70,"span",20),z("click",function(){return l.expandAllCode()}),n()()(),t(71,"div",21)(72,"div",22)(73,"nz-code-box",23),o(74,"nz-demo-experimental-image-preloading",24),t(75,"div",25),c(),t(76,"p"),e(77,"\u8BBE\u7F6E "),t(78,"code"),e(79,"nzPriority"),n(),e(80," \u5C06\u4F1A\u5728\u670D\u52A1\u7AEF\u6E32\u67D3(SSR) \u65F6\u6DFB\u52A0 "),t(81,"code"),e(82,'<link rel="preload">'),n(),e(83," \u6807\u7B7E\uFF0C\u6D4F\u89C8\u5668\u4F1A\u5C06\u5176\u89C6\u4E3A\u9AD8\u4F18\u5148\u7EA7\u8D44\u6E90\u52A0\u8F7D\u3002\u4F60\u53EF\u4EE5\u5728 "),t(84,"a",26),e(85,"MDN - Preloading"),n(),e(86,"\u3001"),t(87,"a",27),e(88,"web.dev - Preloading responsive images"),n(),e(89," \u4E86\u89E3\u66F4\u591A\u3002"),n(),t(90,"p"),e(91,"\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C\u901A\u5E38\u53EA\u9700\u8981\u4E3A\u9996\u5C4F\u56FE\u7247\u8BBE\u7F6E "),t(92,"code"),e(93,"nzPriority"),n(),e(94," \u56E0\u6B64\u5728\u5FAA\u73AF\u751F\u6210\u7684\u6A21\u7248\u4E2D\u53EA\u9700\u8981\u4E3A\u9760\u524D\u7684\u5B50\u9879\u6DFB\u52A0\u5373\u53EF\uFF0C\u4F8B\u5982\uFF1A"),n(),t(95,"pre",28)(96,"code"),e(97,`@for (product of products; track product)
`),t(98,"span",29)(99,"span",29)(100,"span",18),e(101,"<"),n(),e(102,"nz-image"),n(),e(103," "),t(104,"span",30),e(105,"[nzPriority]"),n(),t(106,"span",31)(107,"span",18),e(108,"="),n(),t(109,"span",18),e(110,'"'),n(),e(111,"$index <"),t(112,"span",18),e(113,"="),n(),e(114," 8"),t(115,"span",18),e(116,'"'),n()(),t(117,"span",18),e(118,">"),n()(),t(119,"span",29)(120,"span",29)(121,"span",18),e(122,"</"),n(),e(123,"nz-image"),n(),t(124,"span",18),e(125,">"),n()(),e(126,`
}`),n()(),x(),n()(),t(127,"nz-code-box",32),o(128,"nz-demo-experimental-image-src-loader",24),t(129,"div",25),c(),t(130,"p"),e(131,"\u81EA\u5B9A\u4E49 "),t(132,"code"),e(133,"nzSrcLoader"),n(),e(134," \u7528\u4E8E\u89E3\u6790\u56FE\u7247 URLs, \u4E5F\u53EF\u4EE5\u4F7F\u7528\u5185\u7F6E\u7684\u56FE\u7247 CND \u63D0\u4F9B\u5546\u7684 Loaders\u3002 "),o(135,"br"),e(136,`
\u6211\u4EEC\u5EFA\u8BAE\u59CB\u7EC8\u6307\u5B9A\u56FE\u7247\u7684\u5C3A\u5BF8(`),t(137,"code"),e(138,"nzWidth"),n(),e(139,"\u3001"),t(140,"code"),e(141,"nzHeight"),n(),e(142,")\uFF0C\u4E0D\u4EC5\u53EF\u4EE5\u5E2E\u52A9\u63D0\u9AD8\u7F51\u9875\u4F53\u9A8C\u7684\u5173\u952E\u6307\u6807 "),t(143,"a",33),e(144,"CLS"),n(),e(145,"\uFF0C\u8FD8\u53EF\u4EE5\u914D\u5408 Loader \u5229\u7528\u56FE\u7247 CND \u5BF9\u56FE\u7247\u8FDB\u884C\u4F18\u5316\u5904\u7406\u63D0\u9AD8\u52A0\u8F7D\u901F\u5EA6\u3002 "),o(146,"br"),e(147,`
\u5982\u679C\u5E0C\u671B\u5728\u4E0D\u540C\u7684\u73AF\u5883\u4E0B\u4F7F\u7528\u4E0D\u540C\u7684 Loader \u65F6\u4F60\u53EF\u4EE5\u50CF\u4E0B\u9762\u8FD9\u6837\u505A\uFF1A`),n(),t(148,"pre",16)(149,"code")(150,"span",17),e(151,"import"),n(),e(152," "),t(153,"span",18),e(154,"{"),n(),e(155," environment "),t(156,"span",18),e(157,"}"),n(),e(158," "),t(159,"span",17),e(160,"from"),n(),e(161," "),t(162,"span",19),e(163,"'environments/environment'"),n(),t(164,"span",18),e(165,";"),n(),e(166,`
`),t(167,"span",17),e(168,"import"),n(),e(169," "),t(170,"span",18),e(171,"{"),n(),e(172," NzConfig"),t(173,"span",18),e(174,","),n(),e(175," NZ_CONFIG "),t(176,"span",18),e(177,"}"),n(),e(178," "),t(179,"span",17),e(180,"from"),n(),e(181," "),t(182,"span",19),e(183,"'ng-zorro-antd/core/config'"),n(),t(184,"span",18),e(185,";"),n(),e(186,`
`),t(187,"span",17),e(188,"import"),n(),e(189," "),t(190,"span",18),e(191,"{"),n(),e(192," aliObjectsLoader"),t(193,"span",18),e(194,","),n(),e(195," defaultImageSrcLoader "),t(196,"span",18),e(197,"}"),n(),e(198," "),t(199,"span",17),e(200,"from"),n(),e(201," "),t(202,"span",19),e(203,"'ng-zorro-antd/experimental/image'"),n(),t(204,"span",18),e(205,";"),n(),e(206,`
`),t(207,"span",17),e(208,"const"),n(),e(209," ngZorroConfig"),t(210,"span",18),e(211,":"),n(),e(212," NzConfig "),t(213,"span",34),e(214,"="),n(),e(215," "),t(216,"span",18),e(217,"{"),n(),e(218,`
imageExperimental`),t(219,"span",18),e(220,":"),n(),e(221," "),t(222,"span",18),e(223,"{"),n(),e(224,`
nzSrcLoader`),t(225,"span",18),e(226,":"),n(),e(227," environment"),t(228,"span",18),e(229,"."),n(),e(230,"production "),t(231,"span",34),e(232,"?"),n(),e(233," aliObjectsLoader "),t(234,"span",18),e(235,":"),n(),e(236,` defaultImageSrcLoader
`),t(237,"span",18),e(238,"}"),n(),e(239,`
`),t(240,"span",18),e(241,"}"),n(),t(242,"span",18),e(243,";"),n(),e(244,`
@`),t(245,"span",35),e(246,"NgModule"),n(),t(247,"span",18),e(248,"("),n(),t(249,"span",18),e(250,"{"),n(),e(251,`
`),t(252,"span",34),e(253,"..."),n(),e(254,`
providers`),t(255,"span",18),e(256,":"),n(),e(257," "),t(258,"span",18),e(259,"["),n(),e(260,`
`),t(261,"span",18),e(262,"{"),n(),e(263," provide"),t(264,"span",18),e(265,":"),n(),e(266," NZ_CONFIG"),t(267,"span",18),e(268,","),n(),e(269," useValue"),t(270,"span",18),e(271,":"),n(),e(272," ngZorroConfig "),t(273,"span",18),e(274,"}"),n(),e(275,`
`),t(276,"span",18),e(277,"]"),n(),e(278,`
`),t(279,"span",18),e(280,"}"),n(),t(281,"span",18),e(282,")"),n(),e(283,`
`),t(284,"span",17),e(285,"export"),n(),e(286," "),t(287,"span",17),e(288,"class"),n(),e(289," "),t(290,"span",36),e(291,"AppModule"),n(),e(292," "),t(293,"span",18),e(294,"{"),n(),t(295,"span",18),e(296,"}"),n()()(),x(),n()(),t(297,"nz-code-box",37),o(298,"nz-demo-experimental-image-auto-srcset",24),t(299,"div",25),c(),t(300,"p"),e(301,"\u4F7F\u7528 "),t(302,"code"),e(303,"nzAutoSrcset"),n(),e(304," \u65F6\u8981\u6C42\u5FC5\u987B\u5B9A\u4E49\u56FE\u7247\u5C3A\u5BF8("),t(305,"code"),e(306,"nzWidth"),n(),e(307,"\u3001"),t(308,"code"),e(309,"nzHeight"),n(),e(310,")\uFF0C\u914D\u5408 Loader \u4E3A\u4E0D\u540C\u7684\u50CF\u7D20\u5BC6\u5EA6\u81EA\u52A8\u751F\u6210 "),t(311,"a",38),e(312,"srcset"),n(),e(313,"\u3002"),n(),x(),n()()()(),t(314,"section",39),c(),t(315,"h2",40)(316,"span"),e(317,"API"),n(),t(318,"a",41),e(319,"#"),n()(),t(320,"h3",42)(321,"span"),e(322,"nz-image"),n(),t(323,"label",43),e(324,"component"),n(),t(325,"a",44),e(326,"#"),n()(),t(327,"table")(328,"thead")(329,"tr")(330,"th"),e(331,"\u53C2\u6570"),n(),t(332,"th"),e(333,"\u8BF4\u660E"),n(),t(334,"th"),e(335,"\u7C7B\u578B"),n(),t(336,"th"),e(337,"\u9ED8\u8BA4\u503C"),n(),t(338,"th"),e(339,"\u652F\u6301\u5168\u5C40\u914D\u7F6E"),n()()(),t(340,"tbody")(341,"tr")(342,"td"),e(343,"nzSrc"),n(),t(344,"td"),e(345,"url"),n(),t(346,"td")(347,"code"),e(348,"string"),n()(),t(349,"td"),e(350,"-"),n(),o(351,"td"),n(),t(352,"tr")(353,"td"),e(354,"nzAlt"),n(),t(355,"td"),e(356,"alt"),n(),t(357,"td")(358,"code"),e(359,"string"),n()(),t(360,"td"),e(361,"-"),n(),o(362,"td"),n(),t(363,"tr")(364,"td"),e(365,"nzWidth"),n(),t(366,"td"),e(367,"\u5BBD\u5EA6"),n(),t(368,"td")(369,"code"),e(370,"number|string"),n()(),t(371,"td")(372,"code"),e(373,"auto"),n()(),o(374,"td"),n(),t(375,"tr")(376,"td"),e(377,"nzHeight"),n(),t(378,"td"),e(379,"\u9AD8\u5EA6"),n(),t(380,"td")(381,"code"),e(382,"number|string"),n()(),t(383,"td")(384,"code"),e(385,"auto"),n()(),o(386,"td"),n(),t(387,"tr")(388,"td"),e(389,"nzAutoSrcset"),n(),t(390,"td"),e(391,"\u662F\u5426\u4F18\u5316\u56FE\u7247\u52A0\u8F7D"),n(),t(392,"td")(393,"code"),e(394,"boolean"),n()(),t(395,"td")(396,"code"),e(397,"false"),n()(),t(398,"td"),e(399,"\u2705"),n()(),t(400,"tr")(401,"td"),e(402,"nzSrcLoader"),n(),t(403,"td"),e(404,"\u52A0\u8F7D\u5668"),n(),t(405,"td")(406,"code"),e(407,"NzImageSrcLoader"),n()(),t(408,"td")(409,"code"),e(410,"defaultImageSrcLoader"),n()(),t(411,"td"),e(412,"\u2705"),n()(),t(413,"tr")(414,"td"),e(415,"nzPriority"),n(),t(416,"td"),e(417,"\u662F\u5426\u6DFB\u52A0 "),t(418,"a",26),e(419,"preload"),n()(),t(420,"td")(421,"code"),e(422,"boolean"),n()(),t(423,"td")(424,"code"),e(425,"false"),n()(),o(426,"td"),n()()(),t(427,"h3",45)(428,"span"),e(429,"NzImageSrcLoader"),n(),t(430,"a",46),e(431,"#"),n()(),t(432,"pre",16)(433,"code")(434,"span",17),e(435,"export"),n(),e(436," type NzImageSrcLoader "),t(437,"span",34),e(438,"="),n(),e(439," "),t(440,"span",18),e(441,"("),n(),e(442,"params"),t(443,"span",18),e(444,":"),n(),e(445," "),t(446,"span",18),e(447,"{"),n(),e(448," src"),t(449,"span",18),e(450,":"),n(),e(451," "),t(452,"span",17),e(453,"string"),n(),t(454,"span",18),e(455,";"),n(),e(456," width"),t(457,"span",18),e(458,":"),n(),e(459," "),t(460,"span",17),e(461,"number"),n(),e(462," "),t(463,"span",18),e(464,"}"),n(),t(465,"span",18),e(466,")"),n(),e(467," "),t(468,"span",34),e(469,"="),n(),t(470,"span",34),e(471,">"),n(),e(472," "),t(473,"span",17),e(474,"string"),n(),t(475,"span",18),e(476,";"),n()()(),t(477,"h2",47)(478,"span"),e(479,"\u6CE8\u610F"),n(),t(480,"a",48),e(481,"#"),n()(),t(482,"h3",49)(483,"span"),e(484,"nzSrcLoader"),n(),t(485,"a",50),e(486,"#"),n()(),t(487,"p"),e(488,"\u4F7F\u7528 "),t(489,"code"),e(490,"nzSrcLoader"),n(),e(491," \u53EF\u4EE5\u5E2E\u52A9\u4F60\u586B\u5145\u8BF7\u6C42\u56FE\u7247\u7684\u5173\u952E\u4FE1\u606F\uFF0C\u4F8B\u5982 "),t(492,"code"),e(493,"src"),n(),e(494," \u548C "),t(495,"code"),e(496,"srcset"),n(),e(497,"\uFF0C\u9ED8\u8BA4\u4E3A\uFF1A"),n(),t(498,"pre",16)(499,"code")(500,"span",17),e(501,"export"),n(),e(502," "),t(503,"span",17),e(504,"const"),n(),e(505," defaultImageSrcLoader"),t(506,"span",18),e(507,":"),n(),e(508," NzImageSrcLoader "),t(509,"span",34),e(510,"="),n(),e(511," "),t(512,"span",18),e(513,"("),n(),t(514,"span",18),e(515,"{"),n(),e(516," src "),t(517,"span",18),e(518,"}"),n(),t(519,"span",18),e(520,")"),n(),e(521," "),t(522,"span",34),e(523,"="),n(),t(524,"span",34),e(525,">"),n(),e(526," "),t(527,"span",18),e(528,"{"),n(),e(529,`
`),t(530,"span",17),e(531,"return"),n(),e(532," src"),t(533,"span",18),e(534,";"),n(),e(535,`
`),t(536,"span",18),e(537,"}"),n(),t(538,"span",18),e(539,";"),n()()(),t(540,"p"),e(541,"\u5185\u7F6E\u7684\u56FE\u7247 CND \u521B\u5EFA\u65B9\u6CD5"),n(),t(542,"pre",16)(543,"code"),e(544,`
`),t(545,"span",51),e(546,`/**
* AliObjectsLoader return format
* {domain}/{src}?x-oss-process=image/resize,w_{width}
*/`),n(),e(547,`
`),t(548,"span",17),e(549,"export"),n(),e(550," "),t(551,"span",17),e(552,"function"),n(),e(553," "),t(554,"span",35),e(555,"createAliObjectsLoader"),n(),t(556,"span",18),e(557,"("),n(),e(558,"domain"),t(559,"span",18),e(560,":"),n(),e(561," "),t(562,"span",17),e(563,"string"),n(),t(564,"span",18),e(565,")"),n(),t(566,"span",18),e(567,":"),n(),e(568," NzImageSrcLoader"),t(569,"span",18),e(570,";"),n(),e(571,`
`),t(572,"span",51),e(573,`/**
* ImgixLoader return format
* {domain}/{src}?format=auto&fit=max&w={width}
*/`),n(),e(574,`
`),t(575,"span",17),e(576,"export"),n(),e(577," "),t(578,"span",17),e(579,"function"),n(),e(580," "),t(581,"span",35),e(582,"createImgixLoader"),n(),t(583,"span",18),e(584,"("),n(),e(585,"domain"),t(586,"span",18),e(587,":"),n(),e(588," "),t(589,"span",17),e(590,"string"),n(),t(591,"span",18),e(592,")"),n(),t(593,"span",18),e(594,":"),n(),e(595," NzImageSrcLoader"),t(596,"span",18),e(597,";"),n(),e(598,`
`),t(599,"span",51),e(600,`/**
* CloudinaryLoader return format
* {domain}/c_limit,q_auto,w_{width}/{src}
*/`),n(),e(601,`
`),t(602,"span",17),e(603,"export"),n(),e(604," "),t(605,"span",17),e(606,"function"),n(),e(607," "),t(608,"span",35),e(609,"createCloudinaryLoader"),n(),t(610,"span",18),e(611,"("),n(),e(612,"domain"),t(613,"span",18),e(614,":"),n(),e(615," "),t(616,"span",17),e(617,"string"),n(),t(618,"span",18),e(619,")"),n(),t(620,"span",18),e(621,":"),n(),e(622," NzImageSrcLoader"),t(623,"span",18),e(624,";"),n()()(),t(625,"h3",52)(626,"span"),e(627,"\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u9884\u52A0\u8F7D\u56FE\u7247"),n(),t(628,"a",53),e(629,"#"),n()(),t(630,"p"),e(631,"\u4F7F\u7528\u54CD\u5E94\u5F0F\u56FE\u7247\u53EF\u4EE5\u5E2E\u52A9\u7F51\u9875\u5728\u4E0D\u540C\u7684\u8BBE\u5907\u4E0A\u663E\u793A\u826F\u597D\u7684\u6548\u679C\uFF0C\u9884\u52A0\u8F7D\u56FE\u7247\u53EF\u4EE5\u5E2E\u52A9\u4F60\u66F4\u5FEB\u5730\u52A0\u8F7D\u56FE\u7247\uFF0C\u66F4\u591A\u4FE1\u606F\u8BF7\u53C2\u8003\uFF1A"),n(),t(632,"ul")(633,"li")(634,"a",27),e(635,"preloading responsive images"),n()(),t(636,"li")(637,"a",54),e(638,"next.js image component and image optimization"),n()()(),x(),n()()),a&2&&(p(),d("nzOffsetTop",16),p(),d("nzAffix",!1),p(69),d("nzGutter",8),p(),d("nzSpan",24),p(),d("nzId","components-experimental-image-demo-preloading")("nzLink","components-experimental-image-demo-preloading")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/preloading.md"),p(54),d("nzId","components-experimental-image-demo-src-loader")("nzLink","components-experimental-image-demo-src-loader")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/src-loader.md"),p(170),d("nzId","components-experimental-image-demo-auto-srcset")("nzLink","components-experimental-image-demo-auto-srcset")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/auto-srcset.md"))},dependencies:[E,N,L,k,P,B,T,H,_,R,W,M],encapsulation:2});let r=i;return r})();var Ee=(()=>{let i=class i{constructor(){this.expanded=!1}goLink(m){window&&(window.location.hash=m)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(m=>m.expandCode(this.expanded))}};i.\u0275fac=function(a){return new(a||i)},i.\u0275cmp=u({type:i,selectors:[["nz-demo-experimental-image"]],viewQuery:function(a,l){if(a&1&&h(E,5),a&2){let s;f(s=F())&&(l.codeBoxes=s)}},decls:648,vars:16,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzClick","nzAffix"],["nzHref","#components-experimental-image-demo-preloading","nzTitle","Priority"],["nzHref","#components-experimental-image-demo-src-loader","nzTitle","Use Src Loader"],["nzHref","#components-experimental-image-demo-auto-srcset","nzTitle","Auto Srcset"],["nzHref","#api","nzTitle","API"],[1,"markdown"],[1,"subtitle"],[1,"widget"],["aria-label","Edit this page on Github","href","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/doc/index.en-US.md","target","_blank","rel","noopener noreferrer",1,"edit-button"],["nz-icon","","nzType","edit"],[2,"border-color","#faad14"],["id","when-to-use"],["onclick","window.location.hash = 'when-to-use'",1,"anchor"],["href","/components/image/en"],["href","https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes","target","_blank","rel","noopener"],[1,"language-ts"],[1,"token","keyword"],[1,"token","punctuation"],[1,"token","string"],["nz-icon","","nzType","appstore","nz-tooltip","","nzTooltipTitle","Expand All Code",1,"code-box-expand-trigger",3,"click"],["nz-row","",3,"nzGutter"],["nz-col","",3,"nzSpan"],["nzTitle","Priority","nzSelector","nz-demo-experimental-image-preloading","nzGenerateCommand","ng g ng-zorro-antd:experimental-image-preloading <name>","nzComponentName","NzDemoExperimentalImagePreloadingComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframeHeight","nzHref"],["demo",""],["intro",""],["href","https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content","target","_blank","rel","noopener"],["href","https://web.dev/preload-responsive-images/","target","_blank","rel","noopener"],[1,"language-html"],[1,"token","tag"],[1,"token","attr-name"],[1,"token","attr-value"],["nzTitle","Use Src Loader","nzSelector","nz-demo-experimental-image-src-loader","nzGenerateCommand","ng g ng-zorro-antd:experimental-image-src-loader <name>","nzComponentName","NzDemoExperimentalImageSrcLoaderComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframeHeight","nzHref"],["href","https://web.dev/cls/","target","_blank","rel","noopener"],[1,"token","operator"],[1,"token","function"],[1,"token","class-name"],["nzTitle","Auto Srcset","nzSelector","nz-demo-experimental-image-auto-srcset","nzGenerateCommand","ng g ng-zorro-antd:experimental-image-auto-srcset <name>","nzComponentName","NzDemoExperimentalImageAutoSrcsetComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframeHeight","nzHref"],["href","https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset","target","_blank","rel","noopener"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","nz-image"],[1,"api-type-label","component"],["onclick","window.location.hash = 'nz-image'",1,"anchor"],["id","nzimagesrcloader"],["onclick","window.location.hash = 'nzimagesrcloader'",1,"anchor"],["id","note"],["onclick","window.location.hash = 'note'",1,"anchor"],["id","nzsrcloader"],["onclick","window.location.hash = 'nzsrcloader'",1,"anchor"],["spellcheck","true",1,"token","comment"],["id","responsive-images-and-preloaded-images"],["onclick","window.location.hash = 'responsive-images-and-preloaded-images'",1,"anchor"],["href","https://nextjs.org/docs/basic-features/image-optimization","target","_blank","rel","noopener"]],template:function(a,l){a&1&&(t(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),z("nzClick",function(S){return l.goLink(S)}),o(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5),n()(),t(7,"section",6)(8,"h1"),e(9,"Image"),o(10,"span",7)(11,"span",8),t(12,"a",9),o(13,"span",10),n()(),t(14,"section",6),c(),t(15,"blockquote",11)(16,"p"),e(17,"NG-ZORRO experiments are features that are released but not yet considered stable or production ready"),n(),t(18,"p"),e(19,"Developers and users can opt-in into these features before they are fully released. But "),t(20,"strong"),e(21,"breaking changes"),n(),e(22," may occur with any release."),n()(),t(23,"h2",12)(24,"span"),e(25,"When To Use"),n(),t(26,"a",13),e(27,"#"),n()(),t(28,"ul")(29,"li"),e(30,"When you need the browser to prioritize image loading (needs to be handled in SSR)."),n(),t(31,"li"),e(32,"When you need to optimize for HD displays (e.g. retina screens)."),n(),t(33,"li"),e(34,"When using image CDN."),n(),t(35,"li"),e(36,"More in "),t(37,"a",14),e(38,"Image documentation"),n()(),t(39,"li"),e(40,"Next steps"),t(41,"ul")(42,"li"),e(43,"Add "),t(44,"a",15),e(45,"sizes"),n(),e(46," attribute and responsive support."),n()()()(),t(47,"pre",16)(48,"code")(49,"span",17),e(50,"import"),n(),e(51," "),t(52,"span",18),e(53,"{"),n(),e(54," NzImageModule "),t(55,"span",18),e(56,"}"),n(),e(57," "),t(58,"span",17),e(59,"from"),n(),e(60," "),t(61,"span",19),e(62,"'ng-zorro-antd/experimental/image'"),n(),t(63,"span",18),e(64,";"),n()()(),x(),n(),t(65,"h2")(66,"span"),e(67,"Examples"),n(),t(68,"span",20),z("click",function(){return l.expandAllCode()}),n()()(),t(69,"div",21)(70,"div",22)(71,"nz-code-box",23),o(72,"nz-demo-experimental-image-preloading",24),t(73,"div",25),c(),t(74,"p"),e(75,"Setting "),t(76,"code"),e(77,"nzPriority"),n(),e(78," will add the "),t(79,"code"),e(80,'<link rel="preload">'),n(),e(81," tag when rendering server-side (SSR), and browsers will treat it as a high priority resource to load. You can see this in "),t(82,"a",26),e(83,"MDN - Preloading"),n(),e(84,", "),t(85,"a",27),e(86,"web.dev - Preloading responsive images"),n(),e(87," to learn more."),n(),t(88,"p"),e(89,"Note: usually we only need to set "),t(90,"code"),e(91,"nzPriority"),n(),e(92," for the first screen images, so you only need to add it for the first few items in the cyclically generated template, e.g."),n(),t(93,"pre",28)(94,"code"),e(95,`@for (product of products; track product)
`),t(96,"span",29)(97,"span",29)(98,"span",18),e(99,"<"),n(),e(100,"nz-image"),n(),e(101," "),t(102,"span",30),e(103,"[nzPriority]"),n(),t(104,"span",31)(105,"span",18),e(106,"="),n(),t(107,"span",18),e(108,'"'),n(),e(109,"$index <"),t(110,"span",18),e(111,"="),n(),e(112," 8"),t(113,"span",18),e(114,'"'),n()(),t(115,"span",18),e(116,">"),n()(),t(117,"span",29)(118,"span",29)(119,"span",18),e(120,"</"),n(),e(121,"nz-image"),n(),t(122,"span",18),e(123,">"),n()(),e(124,`
}`),n()(),x(),n()(),t(125,"nz-code-box",32),o(126,"nz-demo-experimental-image-src-loader",24),t(127,"div",25),c(),t(128,"p"),e(129,"Custom "),t(130,"code"),e(131,"nzSrcLoader"),n(),e(132," is used to resolve image URLs, or you can also use the built-in image CND provider's Loaders. "),o(133,"br"),e(134,`
We recommend always specifying the image size (`),t(135,"code"),e(136,"nzWidth"),n(),e(137,", "),t(138,"code"),e(139,"nzHeight"),n(),e(140,"), which can help improve the key metrics of the web experience "),t(141,"a",33),e(142,"CLS"),n(),e(143,", and can also be used with the Loader to optimize the images using the image CND to improve the loading speed. "),o(144,"br"),e(145,`
If you want to use a different Loader in a different environment you can do the following.`),n(),t(146,"pre",16)(147,"code")(148,"span",17),e(149,"import"),n(),e(150," "),t(151,"span",18),e(152,"{"),n(),e(153," environment "),t(154,"span",18),e(155,"}"),n(),e(156," "),t(157,"span",17),e(158,"from"),n(),e(159," "),t(160,"span",19),e(161,"'environments/environment'"),n(),t(162,"span",18),e(163,";"),n(),e(164,`
`),t(165,"span",17),e(166,"import"),n(),e(167," "),t(168,"span",18),e(169,"{"),n(),e(170," NzConfig"),t(171,"span",18),e(172,","),n(),e(173," NZ_CONFIG "),t(174,"span",18),e(175,"}"),n(),e(176," "),t(177,"span",17),e(178,"from"),n(),e(179," "),t(180,"span",19),e(181,"'ng-zorro-antd/core/config'"),n(),t(182,"span",18),e(183,";"),n(),e(184,`
`),t(185,"span",17),e(186,"import"),n(),e(187," "),t(188,"span",18),e(189,"{"),n(),e(190," createAliObjectsLoader"),t(191,"span",18),e(192,","),n(),e(193," defaultImageSrcLoader "),t(194,"span",18),e(195,"}"),n(),e(196," "),t(197,"span",17),e(198,"from"),n(),e(199," "),t(200,"span",19),e(201,"'ng-zorro-antd/experimental/image'"),n(),t(202,"span",18),e(203,";"),n(),e(204,`
`),t(205,"span",17),e(206,"const"),n(),e(207," ngZorroConfig"),t(208,"span",18),e(209,":"),n(),e(210," NzConfig "),t(211,"span",34),e(212,"="),n(),e(213," "),t(214,"span",18),e(215,"{"),n(),e(216,`
imageExperimental`),t(217,"span",18),e(218,":"),n(),e(219," "),t(220,"span",18),e(221,"{"),n(),e(222,`
nzSrcLoader`),t(223,"span",18),e(224,":"),n(),e(225," environment"),t(226,"span",18),e(227,"."),n(),e(228,"production "),t(229,"span",34),e(230,"?"),n(),e(231," "),t(232,"span",35),e(233,"createAliObjectsLoader"),n(),t(234,"span",18),e(235,"("),n(),t(236,"span",19),e(237,"'https://zos.alipayobjects.com/rmsportal'"),n(),t(238,"span",18),e(239,")"),n(),e(240," "),t(241,"span",18),e(242,":"),n(),e(243,` defaultImageSrcLoader
`),t(244,"span",18),e(245,"}"),n(),e(246,`
`),t(247,"span",18),e(248,"}"),n(),t(249,"span",18),e(250,";"),n(),e(251,`
@`),t(252,"span",35),e(253,"NgModule"),n(),t(254,"span",18),e(255,"("),n(),t(256,"span",18),e(257,"{"),n(),e(258,`
`),t(259,"span",34),e(260,"..."),n(),e(261,`
providers`),t(262,"span",18),e(263,":"),n(),e(264," "),t(265,"span",18),e(266,"["),n(),e(267,`
`),t(268,"span",18),e(269,"{"),n(),e(270," provide"),t(271,"span",18),e(272,":"),n(),e(273," NZ_CONFIG"),t(274,"span",18),e(275,","),n(),e(276," useValue"),t(277,"span",18),e(278,":"),n(),e(279," ngZorroConfig "),t(280,"span",18),e(281,"}"),n(),e(282,`
`),t(283,"span",18),e(284,"]"),n(),e(285,`
`),t(286,"span",18),e(287,"}"),n(),t(288,"span",18),e(289,")"),n(),e(290,`
`),t(291,"span",17),e(292,"export"),n(),e(293," "),t(294,"span",17),e(295,"class"),n(),e(296," "),t(297,"span",36),e(298,"AppModule"),n(),e(299," "),t(300,"span",18),e(301,"{"),n(),t(302,"span",18),e(303,"}"),n()()(),x(),n()(),t(304,"nz-code-box",37),o(305,"nz-demo-experimental-image-auto-srcset",24),t(306,"div",25),c(),t(307,"p"),e(308,"Using "),t(309,"code"),e(310,"nzAutoSrcset"),n(),e(311," requires to specify the image size ("),t(312,"code"),e(313,"nzWidth"),n(),e(314,", "),t(315,"code"),e(316,"nzHeight"),n(),e(317,"), with the Loader automatically generating "),t(318,"a",38),e(319,"srcset"),n(),e(320," for different pixel densities."),n(),x(),n()()()(),t(321,"section",39),c(),t(322,"h2",40)(323,"span"),e(324,"API"),n(),t(325,"a",41),e(326,"#"),n()(),t(327,"h3",42)(328,"span"),e(329,"nz-image"),n(),t(330,"label",43),e(331,"component"),n(),t(332,"a",44),e(333,"#"),n()(),t(334,"table")(335,"thead")(336,"tr")(337,"th"),e(338,"Property"),n(),t(339,"th"),e(340,"Description"),n(),t(341,"th"),e(342,"Type"),n(),t(343,"th"),e(344,"Default"),n(),t(345,"th"),e(346,"Global Config"),n()()(),t(347,"tbody")(348,"tr")(349,"td"),e(350,"nzSrc"),n(),t(351,"td"),e(352,"URL"),n(),t(353,"td")(354,"code"),e(355,"string"),n()(),t(356,"td"),e(357,"-"),n(),o(358,"td"),n(),t(359,"tr")(360,"td"),e(361,"nzAlt"),n(),t(362,"td"),e(363,"Alt"),n(),t(364,"td")(365,"code"),e(366,"string"),n()(),t(367,"td"),e(368,"-"),n(),o(369,"td"),n(),t(370,"tr")(371,"td"),e(372,"nzWidth"),n(),t(373,"td"),e(374,"Width"),n(),t(375,"td")(376,"code"),e(377,"number|string"),n()(),t(378,"td")(379,"code"),e(380,"auto"),n()(),o(381,"td"),n(),t(382,"tr")(383,"td"),e(384,"nzHeight"),n(),t(385,"td"),e(386,"Height"),n(),t(387,"td")(388,"code"),e(389,"number|string"),n()(),t(390,"td")(391,"code"),e(392,"auto"),n()(),o(393,"td"),n(),t(394,"tr")(395,"td"),e(396,"nzAutoSrcset"),n(),t(397,"td"),e(398,"Whether to optimize image loading"),n(),t(399,"td")(400,"code"),e(401,"boolean"),n()(),t(402,"td")(403,"code"),e(404,"false"),n()(),t(405,"td"),e(406,"\u2705"),n()(),t(407,"tr")(408,"td"),e(409,"nzSrcLoader"),n(),t(410,"td"),e(411,"Loader"),n(),t(412,"td")(413,"code"),e(414,"NzImageSrcLoader"),n()(),t(415,"td")(416,"code"),e(417,"defaultImageSrcLoader"),n()(),t(418,"td"),e(419,"\u2705"),n()(),t(420,"tr")(421,"td"),e(422,"nzPriority"),n(),t(423,"td"),e(424,"Whether to add "),t(425,"a",26),e(426,"preload"),n(),e(427," (only SSR)"),n(),t(428,"td")(429,"code"),e(430,"boolean"),n()(),t(431,"td")(432,"code"),e(433,"false"),n()(),t(434,"td"),e(435,"\u2705"),n()()()(),t(436,"h3",45)(437,"span"),e(438,"NzImageSrcLoader"),n(),t(439,"a",46),e(440,"#"),n()(),t(441,"pre",16)(442,"code")(443,"span",17),e(444,"export"),n(),e(445," type NzImageSrcLoader "),t(446,"span",34),e(447,"="),n(),e(448," "),t(449,"span",18),e(450,"("),n(),e(451,"params"),t(452,"span",18),e(453,":"),n(),e(454," "),t(455,"span",18),e(456,"{"),n(),e(457," src"),t(458,"span",18),e(459,":"),n(),e(460," "),t(461,"span",17),e(462,"string"),n(),t(463,"span",18),e(464,";"),n(),e(465," width"),t(466,"span",18),e(467,":"),n(),e(468," "),t(469,"span",17),e(470,"number"),n(),e(471," "),t(472,"span",18),e(473,"}"),n(),t(474,"span",18),e(475,")"),n(),e(476," "),t(477,"span",34),e(478,"="),n(),t(479,"span",34),e(480,">"),n(),e(481," "),t(482,"span",17),e(483,"string"),n(),t(484,"span",18),e(485,";"),n()()(),t(486,"h2",47)(487,"span"),e(488,"Note"),n(),t(489,"a",48),e(490,"#"),n()(),t(491,"h3",49)(492,"span"),e(493,"nzSrcLoader"),n(),t(494,"a",50),e(495,"#"),n()(),t(496,"p"),e(497,"Using "),t(498,"code"),e(499,"nzSrcLoader"),n(),e(500," helps you to fill in key information about the requested image, such as "),t(501,"code"),e(502,"src"),n(),e(503," and "),t(504,"code"),e(505,"width"),n(),e(506,", which defaults to"),n(),t(507,"pre",16)(508,"code")(509,"span",17),e(510,"export"),n(),e(511," "),t(512,"span",17),e(513,"const"),n(),e(514," defaultImageSrcLoader"),t(515,"span",18),e(516,":"),n(),e(517," NzImageSrcLoader "),t(518,"span",34),e(519,"="),n(),e(520," "),t(521,"span",18),e(522,"("),n(),t(523,"span",18),e(524,"{"),n(),e(525," src "),t(526,"span",18),e(527,"}"),n(),t(528,"span",18),e(529,")"),n(),e(530," "),t(531,"span",34),e(532,"="),n(),t(533,"span",34),e(534,">"),n(),e(535," "),t(536,"span",18),e(537,"{"),n(),e(538,`
`),t(539,"span",17),e(540,"return"),n(),e(541," src"),t(542,"span",18),e(543,";"),n(),e(544,`
`),t(545,"span",18),e(546,"}"),n(),t(547,"span",18),e(548,";"),n()()(),t(549,"p"),e(550,"Built-in image CND creation method"),n(),t(551,"pre",16)(552,"code"),e(553,`
`),t(554,"span",51),e(555,`/**
* AliObjectsLoader return format
* {domain}/{src}?x-oss-process=image/resize,w_{width}
*/`),n(),e(556,`
`),t(557,"span",17),e(558,"export"),n(),e(559," "),t(560,"span",17),e(561,"function"),n(),e(562," "),t(563,"span",35),e(564,"createAliObjectsLoader"),n(),t(565,"span",18),e(566,"("),n(),e(567,"domain"),t(568,"span",18),e(569,":"),n(),e(570," "),t(571,"span",17),e(572,"string"),n(),t(573,"span",18),e(574,")"),n(),t(575,"span",18),e(576,":"),n(),e(577," NzImageSrcLoader"),t(578,"span",18),e(579,";"),n(),e(580,`
`),t(581,"span",51),e(582,`/**
* ImgixLoader return format
* {domain}/{src}?format=auto&fit=max&w={width}
*/`),n(),e(583,`
`),t(584,"span",17),e(585,"export"),n(),e(586," "),t(587,"span",17),e(588,"function"),n(),e(589," "),t(590,"span",35),e(591,"createImgixLoader"),n(),t(592,"span",18),e(593,"("),n(),e(594,"domain"),t(595,"span",18),e(596,":"),n(),e(597," "),t(598,"span",17),e(599,"string"),n(),t(600,"span",18),e(601,")"),n(),t(602,"span",18),e(603,":"),n(),e(604," NzImageSrcLoader"),t(605,"span",18),e(606,";"),n(),e(607,`
`),t(608,"span",51),e(609,`/**
* CloudinaryLoader return format
* {domain}/c_limit,q_auto,w_{width}/{src}
*/`),n(),e(610,`
`),t(611,"span",17),e(612,"export"),n(),e(613," "),t(614,"span",17),e(615,"function"),n(),e(616," "),t(617,"span",35),e(618,"createCloudinaryLoader"),n(),t(619,"span",18),e(620,"("),n(),e(621,"domain"),t(622,"span",18),e(623,":"),n(),e(624," "),t(625,"span",17),e(626,"string"),n(),t(627,"span",18),e(628,")"),n(),t(629,"span",18),e(630,":"),n(),e(631," NzImageSrcLoader"),t(632,"span",18),e(633,";"),n()()(),t(634,"h3",52)(635,"span"),e(636,"Responsive images and preloaded images"),n(),t(637,"a",53),e(638,"#"),n()(),t(639,"p"),e(640,"Using responsive images can help web pages display well on different devices. Preloading images can help you load images faster, for more information please refer to."),n(),t(641,"ul")(642,"li")(643,"a",27),e(644,"preloading responsive images"),n()(),t(645,"li")(646,"a",54),e(647,"next.js image component and image optimization"),n()()(),x(),n()()),a&2&&(p(),d("nzOffsetTop",16),p(),d("nzAffix",!1),p(67),d("nzGutter",8),p(),d("nzSpan",24),p(),d("nzId","components-experimental-image-demo-preloading")("nzLink","components-experimental-image-demo-preloading")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/preloading.md"),p(54),d("nzId","components-experimental-image-demo-src-loader")("nzLink","components-experimental-image-demo-src-loader")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/src-loader.md"),p(179),d("nzId","components-experimental-image-demo-auto-srcset")("nzLink","components-experimental-image-demo-auto-srcset")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/auto-srcset.md"))},dependencies:[E,N,L,k,P,B,T,H,_,R,W,M],encapsulation:2});let r=i;return r})();var st=(()=>{let i=class i{};i.\u0275fac=function(a){return new(a||i)},i.\u0275mod=v({type:i}),i.\u0275inj=D({imports:[te,se,Y.forChild([{path:"en",component:Ee},{path:"zh",component:ce}])]});let r=i;return r})();export{st as NzDemoExperimentalImageModule};