PageSourceSearch
Opt out API access

https://preview-8495-ng-zorro-antd.surge.sh/3168.6c283d1525c451ca.js

js preview-8495-ng-zorro-antd.surge.sh collected 2026-10-03 14:57:45 UTC 50,762 bytes, 1 lines download raw bytes 

1"use strict";(self.webpackChunkng_zorro_antd_doc=self.webpackChunkng_zorro_antd_doc||[]).push([[3168],{3168:(M,I,r)=>{r.r(I),r.d(I,{NzDemoExperimentalImageModule:()=>j});var w=r(9072),y=r(2928),b=r(8352),E=r(1316),e=r(4496),v=r(5657),L=r(3616),u=r(2136),m=r(608),k=r(5739),R=r(6956),N=r(108);const B=["imageRef"];function $(n){return"number"==typeof n||/^(\d)+(px)?$/.test(n)}const Y=({src:n})=>n;function g(n){return({src:p,width:t})=>{const a=(0,k.Ar)(t)?"":`?x-oss-process=image/resize,w_${t}`;return`${n}/${function C(n){return"/"===n[0]?n.slice(1):n}(p)}${a}`}}const z="imageExperimental",H=[16,32,48,64,96,128,256,384,640,750,828,1080,1200,1920,2048,3840];let l=(()=>{class n{constructor(t,a,o){this.cdr=t,this.nzConfigService=a,this.imagePreloadService=o,this._nzModuleName=z,this.nzSrc="",this.nzAlt="",this.nzWidth="auto",this.nzHeight="auto",this.nzSrcLoader=Y,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 v.E,this.reloadDisposeHandler=()=>{},this.nzConfigService.getConfigChangeEventForComponent(z).pipe((0,L.a)(this.destroy$)).subscribe(()=>{this.composeImageAttrs(),this.cdr.markForCheck()})}ngOnInit(){this.nzPriority&&this.preload()}ngOnChanges(t){const{nzLoader:a,nzSrc:o,nzOptimize:s}=t;(o||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||($(this.nzWidth)&&$(this.nzHeight)?this.nzSrc.endsWith(".svg")?((0,m.mo)("SVG does not need to be optimized"),1):this.nzSrc.startsWith("data:")&&((0,m.mo)("Data URLs cannot be optimized"),1):((0,m.mo)('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)))}composeImageAttrs(){const t=this.getLoader();if(!this.optimizable())return this.src=t({src:this.nzSrc}),this.width=this.nzWidth,void(this.height=this.nzHeight);this.width="number"==typeof this.nzWidth?this.nzWidth:parseInt(this.nzWidth,10),this.height="number"==typeof this.nzHeight?this.nzHeight:parseInt(this.nzHeight,10);const a=this.convertWidths(this.width,H);this.src=t({src:this.nzSrc,width:a[0]}),this.srcset=a.map((o,s)=>`${t({src:this.nzSrc,width:o})} ${s+1}x`).join(", ")}getLoader(){return this.nzSrcLoader||Y}convertWidths(t,a){const o=[...a].sort((s,i)=>s-i);return[...new Set([t,2*t].map(s=>o.find(i=>i>=s)||s))]}static#e=this.\u0275fac=function(a){return new(a||n)(e.GI1(e.kD9),e.GI1(u.gl),e.GI1(N.Ix))};static#n=this.\u0275cmp=e.In1({type:n,selectors:[["nz-image"]],viewQuery:function(a,o){if(1&a&&e.CC$(B,5),2&a){let s;e.wto(s=e.Gqi())&&(o.imageRef=s.first)}},inputs:{nzSrc:"nzSrc",nzAlt:"nzAlt",nzWidth:"nzWidth",nzHeight:"nzHeight",nzSrcLoader:"nzSrcLoader",nzAutoSrcset:"nzAutoSrcset",nzPriority:"nzPriority",nzFallback:"nzFallback",nzPlaceholder:"nzPlaceholder",nzDisablePreview:"nzDisablePreview"},exportAs:["nzImage"],standalone:!0,features:[e.SYr,e.UHJ],decls:2,vars:9,consts:[["nz-image","",3,"nzSrc","nzSrcset","nzDisablePreview","nzFallback","nzPlaceholder"],["imageRef",""]],template:function(a,o){1&a&&e.wR5(0,"img",0,1),2&a&&(e.E7m("nzSrc",o.src)("nzSrcset",o.srcset)("nzDisablePreview",o.nzDisablePreview)("nzFallback",o.nzFallback)("nzPlaceholder",o.nzPlaceholder),e.e48("width",o.width)("height",o.height)("srcset",o.srcset)("alt",o.nzAlt||null))},dependencies:[R.Ok],encapsulation:2,changeDetection:0})}return(0,E.UN)([(0,u.Mb)()],n.prototype,"nzSrcLoader",void 0),(0,E.UN)([(0,k.U7)(),(0,u.Mb)()],n.prototype,"nzAutoSrcset",void 0),(0,E.UN)([(0,k.U7)()],n.prototype,"nzPriority",void 0),(0,E.UN)([(0,u.Mb)()],n.prototype,"nzFallback",void 0),(0,E.UN)([(0,u.Mb)()],n.prototype,"nzPlaceholder",void 0),(0,E.UN)([(0,k.U7)(),(0,u.Mb)()],n.prototype,"nzDisablePreview",void 0),n})(),P=(()=>{class n{static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275mod=e.a4G({type:n});static#a=this.\u0275inj=e.s3X({})}return n})();var G=r(1160);const T=[P,b.EV,G.I$,R.c1];var d=r(6056),O=r(8700),h=r(8656),c=r(3172),f=r(9100),F=r(5120),x=r(28);let A=(()=>{class n{constructor(){this.src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",this.loader=g("https://zos.alipayobjects.com/rmsportal")}static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275cmp=e.In1({type:n,selectors:[["nz-demo-experimental-image-auto-srcset"]],decls:1,vars:2,consts:[["nzWidth","200","nzHeight","200","nzAutoSrcset","",3,"nzSrc","nzSrcLoader"]],template:function(a,o){1&a&&e.wR5(0,"nz-image",0),2&a&&e.E7m("nzSrc",o.src)("nzSrcLoader",o.loader)},dependencies:[l],encapsulation:2})}return n})(),D=(()=>{class n{constructor(){this.src="https://zos.alipayobjects.com/rmsportal/jkjg

1kEfvpUPVyRjUImniVslZfWPnJuuZ.png"}static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275cmp=e.In1({type:n,selectors:[["nz-demo-experimental-image-preloading"]],decls:1,vars:1,consts:[["nzWidth","200","nzHeight","200","nzPriority","",3,"nzSrc"]],template:function(a,o){1&a&&e.wR5(0,"nz-image",0),2&a&&e.E7m("nzSrc",o.src)},dependencies:[l],encapsulation:2})}return n})(),S=(()=>{class n{constructor(){this.src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",this.loader=g("https://zos.alipayobjects.com/rmsportal")}static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275cmp=e.In1({type:n,selectors:[["nz-demo-experimental-image-src-loader"]],decls:1,vars:2,consts:[["nzWidth","200","nzHeight","200",3,"nzSrc","nzSrcLoader"]],template:function(a,o){1&a&&e.wR5(0,"nz-image",0),2&a&&e.E7m("nzSrc",o.src)("nzSrcLoader",o.loader)},dependencies:[l],encapsulation:2})}return n})(),W=(()=>{class n{constructor(){this.expanded=!1}goLink(t){window&&(window.location.hash=t)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(t=>{t.nzExpanded=this.expanded,t.expandCode(this.expanded),t.check()})}static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275cmp=e.In1({type:n,selectors:[["nz-demo-experimental-image"]],viewQuery:function(a,o){if(1&a&&e.CC$(d.A,5),2&a){let s;e.wto(s=e.Gqi())&&(o.codeBoxes=s)}},decls:665,vars:16,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzAffix","nzClick"],["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,o){1&a&&(e.I0R(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),e.qCj("nzClick",function(i){return o.goLink(i)}),e.wR5(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5),e.C$Y()(),e.I0R(7,"section",6)(8,"h1"),e.OEk(9,"Image"),e.I0R(10,"span",7),e.OEk(11,"\u56fe\u7247"),e.C$Y(),e.wR5(12,"span",8),e.I0R(13,"a",9),e.wR5(14,"span",10),e.C$Y()(),e.I0R(15,"section",6),e.EdD(),e.I0R(16,"blockquote",11)(17,"p"),e.OEk(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"),e.C$Y(),e.I0R(19,"p"),e.OEk(20,"\u5f00\u53d1\u8005\u6216\u7528\u6237\u53ef\u4ee5\u9009\u62e9\u5

1728\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 "),e.I0R(21,"strong"),e.OEk(22,"breaking changes"),e.C$Y(),e.OEk(23,"\u3002"),e.C$Y()(),e.I0R(24,"h2",12)(25,"span"),e.OEk(26,"\u4f55\u65f6\u4f7f\u7528"),e.C$Y(),e.I0R(27,"a",13),e.OEk(28,"#"),e.C$Y()(),e.I0R(29,"ul")(30,"li"),e.OEk(31,"\u9700\u8981\u6d4f\u89c8\u5668\u4f18\u5148\u52a0\u8f7d\u56fe\u7247\u65f6\uff08\u9700\u8981\u5728 SSR \u4e0b\u5904\u7406\uff09\u3002"),e.C$Y(),e.I0R(32,"li"),e.OEk(33,"\u9700\u8981\u5bf9\u9ad8\u6e05\u663e\u793a\u5668\uff08\u5982\u89c6\u7f51\u819c\u5c4f\uff09\u4f18\u5316\u65f6\u3002"),e.C$Y(),e.I0R(34,"li"),e.OEk(35,"\u4f7f\u7528\u56fe\u7247 CDN \u670d\u52a1\u65f6\u3002"),e.C$Y(),e.I0R(36,"li"),e.OEk(37,"\u4ee5\u53ca "),e.I0R(38,"a",14),e.OEk(39,"Image documentation"),e.C$Y(),e.OEk(40," \u4e2d\u7684\u529f\u80fd"),e.C$Y(),e.I0R(41,"li"),e.OEk(42,"\u4e0b\u4e00\u6b65\u8ba1\u5212"),e.I0R(43,"ul")(44,"li"),e.OEk(45,"\u6dfb\u52a0 "),e.I0R(46,"a",15),e.OEk(47,"sizes"),e.C$Y(),e.OEk(48," \u5c5e\u6027\u53ca\u54cd\u5e94\u5f0f\u7684\u652f\u6301"),e.C$Y()()()(),e.I0R(49,"pre",16)(50,"code")(51,"span",17),e.OEk(52,"import"),e.C$Y(),e.OEk(53," "),e.I0R(54,"span",18),e.OEk(55,"{"),e.C$Y(),e.OEk(56," NzImageModule "),e.I0R(57,"span",18),e.OEk(58,"}"),e.C$Y(),e.OEk(59," "),e.I0R(60,"span",17),e.OEk(61,"from"),e.C$Y(),e.OEk(62," "),e.I0R(63,"span",19),e.OEk(64,"'ng-zorro-antd/experimental/image'"),e.C$Y(),e.I0R(65,"span",18),e.OEk(66,";"),e.C$Y()()(),e.eAF(),e.C$Y(),e.I0R(67,"h2")(68,"span"),e.OEk(69,"\u4ee3\u7801\u6f14\u793a"),e.C$Y(),e.I0R(70,"span",20),e.qCj("click",function(){return o.expandAllCode()}),e.C$Y()()(),e.I0R(71,"div",21)(72,"div",22)(73,"nz-code-box",23),e.wR5(74,"nz-demo-experimental-image-preloading",24),e.I0R(75,"div",25),e.EdD(),e.I0R(76,"p"),e.OEk(77,"\u8bbe\u7f6e "),e.I0R(78,"code"),e.OEk(79,"nzPriority"),e.C$Y(),e.OEk(80," \u5c06\u4f1a\u5728\u670d\u52a1\u7aef\u6e32\u67d3(SSR) \u65f6\u6dfb\u52a0 "),e.I0R(81,"code"),e.OEk(82,'<link rel="preload">'),e.C$Y(),e.OEk(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 "),e.I0R(84,"a",26),e.OEk(85,"MDN - Preloading"),e.C$Y(),e.OEk(86,"\u3001"),e.I0R(87,"a",27),e.OEk(88,"web.dev - Preloading responsive images"),e.C$Y(),e.OEk(89," \u4e86\u89e3\u66f4\u591a\u3002"),e.C$Y(),e.I0R(90,"p"),e.OEk(91,"\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u901a\u5e38\u53ea\u9700\u8981\u4e3a\u9996\u5c4f\u56fe\u7247\u8bbe\u7f6e "),e.I0R(92,"code"),e.OEk(93,"nzPriority"),e.C$Y(),e.OEk(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"),e.C$Y(),e.I0R(95,"pre",28)(96,"code")(97,"span",29)(98,"span",29)(99,"span",18),e.OEk(100,"<"),e.C$Y(),e.OEk(101,"ng-container"),e.C$Y(),e.OEk(102," "),e.I0R(103,"span",30),e.OEk(104,"*ngFor"),e.C$Y(),e.I0R(105,"span",31)(106,"span",18),e.OEk(107,"="),e.C$Y(),e.I0R(108,"span",18),e.OEk(109,'"'),e.C$Y(),e.OEk(110,"let product of products; index as i"),e.I0R(111,"span",18),e.OEk(112,'"'),e.C$Y()(),e.I0R(113,"span",18),e.OEk(114,">"),e.C$Y()(),e.OEk(115,"\n  "),e.I0R(116,"span",29)(117,"span",29)(118,"span",18),e.OEk(119,"<"),e.C$Y(),e.OEk(120,"nz-image"),e.C$Y(),e.OEk(121,"\n    "),e.I0R(122,"span",30),e.OEk(123,"[nzPriority]"),e.C$Y(),e.I0R(124,"span",31)(125,"span",18),e.OEk(126,"="),e.C$Y(),e.I0R(127,"span",18),e.OEk(128,'"'),e.C$Y(),e.OEk(129,"i <"),e.I0R(130,"span",18),e.OEk(131,"="),e.C$Y(),e.OEk(132," 8"),e.I0R(133,"span",18),e.OEk(134,'"'),e.C$Y()(),e.OEk(135,"\n  "),e.I0R(136,"span",18),e.OEk(137,">"),e.C$Y()(),e.I0R(138,"span",29)(139,"span",29)(140,"span",18),e.OEk(141,"</"),e.C$Y(),e.OEk(142,"nz-image"),e.C$Y(),e.I0R(143,"span",18),e.OEk(144,">"),e.C$Y()(),e.OEk(145,"\n"),e.I0R(146,"span",29)(147,"span",29)(148,"span",18),e.OEk(149,"</"),e.C$Y(),e.OEk(150,"ng-container"),e.C$Y(),e.I0R(151,"span",18),e.OEk(152,">"),e.C$Y()()()(),e.eAF(),e.C$Y()(),e.I0R(153,"nz-code-box",32),e.wR5(154,"nz-demo-experimental-image-src-loader",24),e.I0R(155,"div",25),e.EdD(),e.I0R(156,"p"),e.OEk(157,"\u81ea\u5b9a\u4e49 "),e.I0R(158,"code"),e.OEk(159,"nzSrcLoader"),e.C$Y(),e.OEk(160," \u7528\u4e8e\u89e3\u6790\u56fe\u7247 URLs, \u4e5f\u53ef\u4ee5\u4f7f\u7528\u5185\u7f6e\u7684\u56fe\u7247 CND \u63d0\u4f9b\u5546\u7684 Loaders\u3002 "),e.wR5(161,"br"),e.OEk(162,"\n\u6211\u4eec\u5efa\u8bae\u59cb\u7ec8\u6307\u5b9a\u56fe\u7247\u7684\u5c3a\u5bf8("),e.I0R(163,"code"),e.OEk(164,"nzWidth"),e.C$Y(),e.OEk(165,"\u3001"),e.I0R(166,"code"),e.OEk(167,"nzHeight"),e.C$Y(),e.OEk(168,")\uff0c\u4e0d\u4ec5\u53ef\u4ee5\u5e2e\u52a9\u63d0\u9ad8\u7f51\u9875\u4f53\u9a8c\u7684\u5173\u952e\u6307\u6807 "),e.I0R(169,"a",33),e.OEk(170,"CLS"),e.C$Y(),e.OEk(171,"\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 "),e.wR5(172,"br"),e.OEk(173,"\n\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"),e.C$Y(),e.I0R(174,"pre",16)(175,"code")(176,"span",17),e.OEk(177,"import"),e.C$Y(),e.OEk(178," "),e.I0R(179,"span",18),e.OEk(180,"{"),e.C$Y(),e.OEk(181," environment "),e.I0R(182,"span",18),e.OEk(183,"}"),e.C$Y(),e.OEk(184," "),e.I0R(185,"span",17),e.OEk(186,"from"),e.C$Y(),e.OEk(187," "),e.I0R(188,"span",19),e.OEk(189,"'environments/environment'"),e.C$Y(),e.I0R(190,"span",18),e.OEk(191,";"),e.C$Y(),e.OEk(192,"\n\n"),e.I0R(193,"span",17),e.OEk(194,"import"),e.C$Y(),e.OEk(195," "),e.I0R(196,"span",18),e.OEk(197,"{"),e.C$Y(),e.OEk(198," NzConfig"),e.I0R(199,"span",18),e.OEk(200,","),e.C$Y(),e.OEk(201," NZ_CONFIG "),e.I0R(202,"span",18),e.OEk(203,"}"),e.C$Y(),e.OEk(204," "),e.I0R(205,"span",17),e.OEk(206,"from"),e.C$Y(),e.OEk(207," "),e.I0R(208,"span",19),e.OEk(209,"'ng-zorro-antd/core/config'"),e.C$Y(),e.I0R(210,"span",18),e.OEk(211,";"),e.C$Y(),e.OEk(212,"\n"),e.I0R(213,"span",17),e.OEk(214,"import"),e.C$Y(),e.OEk(215," "),e.I0R(216,"span",18),e.OEk(217,"{"),e.C$Y(),e.OEk(218," aliObjectsLoader"),e.I0R(219,"span",18),e.OEk(220,","),e.C$Y(),e.OEk(221," defaultImageSrcLoader "),e.I0R(222,"span",18),e.OEk(223,"}"),e.C$Y(),e.OEk(224," "),e.I0R(225,"span",17),e.OEk(226,"from"),e.C$Y(),e.OEk(227," "),e.I0R(228,"span",19),e.OEk(229,"'ng-zorro-antd/experimental/image'"),e.C$Y(),e.I0R(230,"span",18),e.OEk(231,";"),e.C$Y(),e.OEk(232,"\n\n"),e.I0R(233,"span",17),e.OEk(234,"const"),e.C$Y(),e.OEk(235," ngZorroConfig"),e.I0R(236,"span",18),e.OEk(237,":"),e.C$Y(),e.OEk(238," NzConfig "),e.I0R(239,"span",34),e.OEk(240,"="),e.C$Y(),e.OEk(241," "),e.I0R(242,"span",18),e.OEk(243,"{"),e.C$Y(),e.OEk(244,"\n  imageExperimental"),e.I0R(245,"span",18),e.OEk(246,":"),e.C$Y(),e.OEk(247," "),e.I0R(248,"span",18),e.OEk(249,"{"),e.C$Y(),e.OEk(250,"\n    nzSrcLoader"),e.I0R(251,"span",18),e.OEk(252,":"),e.C$Y(),e.OEk(253," environment"),e.I0R(254,"span",18),e.OEk(255,"."),e.C$Y(),e.OEk(256,"production "),e.I0R(257,"span",34),e.OEk(258,"?"),e.C$Y(),e.OEk(259," aliObjectsLoader "),e.I0R(260,"span",18),e.OEk(261,":"),e.C$Y(),e.OEk(262," defaultImageSrcLoader\n  "),e.I0R(263,"span",18),e.OEk(264,"}"),e.C$Y(),e.OEk(265,"\n"),e.I0R(266,"span",18),e.OEk(267,"}"),e.C$Y(),e.I0R(268,"span",18),e.OEk(269,";"),e.C$Y(),e.OEk(270,"\n\n@"),e.I0R(271,"span",35),e.OEk(272,"NgModule"),e.C$Y(),e.I0R(273,"span",18),e.OEk(274,"("),e.C$Y(),e.I0R(275,"span",18),e.OEk(276,"{"),e.C$Y(),e.OEk(277,"\n  "),e.I0R(278,"span",34),e.OEk(279,"..."),e.C$Y(),e.OEk(280,"\n  providers"),e.I0R(281,"span",18),e.OEk(282,":"),e.C$Y(),e.OEk(283," "),e.I0R(284,"span",18),e.OEk(285,"["),e.C$Y(),e.OEk(286,"\n    "),e.I0R(287,"span",18),e.OEk(288,"{"),e.C$Y(),e.OEk(289," provide"),e.I0R(290,"span",18),e.OEk(291,":"),e.C$Y(),e.OEk(292," NZ_CONFIG"),e.I0R(293,"span",18),e.OEk(294,","),e.C$Y(),e.OEk(295," useValue"),e.I0R(296,"span",18),e.OEk(297,":"),e.C$Y(),e.OEk(298," ngZorroConfig "),e.I0R(299,"span",18),e.OEk(300,"}"),e.C$Y(),e.OEk(301,"\n  "),e.I0R(302,"span",18),e.OEk(303,"]"),e.C$Y(),e.OEk(304,"\n"),e.I0R(305,"span",18),e.OEk(306,"}"),e.C$Y(),e.I0R(307,"span",18),e.OEk(308,")"),e.C$Y(),e.OEk(309,"\n"),e.I0R(310,"span",17),e.OEk(311,"export"),e.C$Y(),e.OEk(312," "),e.I0R(313,"span",17),e.OEk(314,"class"),e.C$Y(),e.OEk(315," "),e.I0R(316,"span",36),e.OEk(317,"AppModule"),e.C$Y(),e.OEk(318," "),e.I0R(319,"span",18),e.OEk(320,"{"),e.C$Y(),e.I0R(321,"span",18),e.OEk(322,"}"),e.C$Y()()(),e.eAF(),e.C$Y()(),e.I0R(323,"nz-code-box",37),e.wR5(324,"nz-demo-experimental-image-auto-srcset",24),e.I0R(325,"div",25),e.EdD(),e.I0R(326,"p"),e.OEk(327,"\u4f7f\u7528 "),e.I0R(328,"code"),e.OEk(329,"nzAutoSrcset"),e.C$Y(),e.OEk(330," \u65f6\u8981\u6c42\u5fc5\u987b\u5b9a\u4e49\u56fe\u7247\u5c3a\u5bf8("),e.I0R(331,"code"),e.OEk(332,"nzWidth"),e.C$Y(),e.OEk(333,"\u3001"),e.I0R(334,"code"),e.OEk(335,"nzHeight"),e.C$Y(),e.OEk(336,")\uff0c\u914d\u5408 Loader \u4e3a\u4e0d\u540c\u7684\u50cf\u7d20\u5bc6\u5ea6\u81ea\u52a8\u751f\u6210 "),e.I0R(337,"a",38),e.OEk(338,"srcset"),e.C$Y(),e.OEk(339,"\u3002"),e.C$Y(),e.eAF(),e.C$Y()()()(),e.I0R(340,"section",39),e.EdD(),e.I0R(341,"h2",40)(342,"span"),e.OEk(343,"API"),e.C$Y(),e.I0R(344,"a",41),e.OEk(345,"#"),e.C$Y()(),e.I0R(346,"h3",42)(347,"span"),e.OEk(348,"nz-image"),e.C$Y(),e.I0R(349,"label",43),e.OEk(350,"component"),e.C$Y(),e.I0R(351,"a",44),e.OEk(352,"#"),e.C$Y()(),e.I0R(353,"table")(354,"thead")(355,"tr")(356,"th"),e.OEk(357,"\u53c2\u6570"),e.C$Y(),e.I0R(358,"th"),e.OEk(359,"\u8bf4\u660e"),e.C$Y(),e.I0R(360,"th"),e.OEk(361,"\u7c7b\u578b"),e.C$Y(),e.I0R(362,"th"),e.OEk(363,"\u9ed8\u8ba4\u503c"),e.C$Y(),e.I0R(364,"th"),e.OEk(365,"\u652f\u6301\u5168\u5c40\u914d\u7f6e"),e.C$Y()()(),e.I0R(366,"tbody")(367,"tr")(368,"td"),e.OEk(369,"nzSrc"),e.C$Y(),e.I0R(370,"td"),e.OEk(371,"url"),e.C$Y(),e.I0R(372,"td")(373,"code"),e.OEk(374,"string"),e.C$Y()(),e.I0R(375,"td"),e.OEk(376,"-"),e.C$Y(),e.wR5(377,"td"),e.C$Y(),e.I0R(378,"tr")(379,"td"),e.OEk(380,"nzAlt"),e.C$Y(),e.I0R(381,"td"),e.OEk(382,"alt"),e.C$Y(),e.I0R(383,"td")(384,"code"),e.OEk(385,"string"),e.C$Y()(),e.I0R(386,"td"),e.OEk(387,"-"),e.C$Y(),e.wR5(388,"td"),e.C$Y(),e.I0R(389,"tr")(390,"td"),e.OEk(391,"nzWidth"),e.C$Y(),e.I0R(392,"td"),e.OEk(393,"\u5bbd\u5ea6"),e.C$Y(),e.I0R(394,"td")(395,"code"),e.OEk(396,"number|string"),e.C$Y()(),e.I0R(397,"td")(398,"code"),e.OEk(399,"auto"),e.C$Y()(),e.wR5(4

100,"td"),e.C$Y(),e.I0R(401,"tr")(402,"td"),e.OEk(403,"nzHeight"),e.C$Y(),e.I0R(404,"td"),e.OEk(405,"\u9ad8\u5ea6"),e.C$Y(),e.I0R(406,"td")(407,"code"),e.OEk(408,"number|string"),e.C$Y()(),e.I0R(409,"td")(410,"code"),e.OEk(411,"auto"),e.C$Y()(),e.wR5(412,"td"),e.C$Y(),e.I0R(413,"tr")(414,"td"),e.OEk(415,"nzAutoSrcset"),e.C$Y(),e.I0R(416,"td"),e.OEk(417,"\u662f\u5426\u4f18\u5316\u56fe\u7247\u52a0\u8f7d"),e.C$Y(),e.I0R(418,"td")(419,"code"),e.OEk(420,"boolean"),e.C$Y()(),e.I0R(421,"td")(422,"code"),e.OEk(423,"false"),e.C$Y()(),e.I0R(424,"td"),e.OEk(425,"\u2705"),e.C$Y()(),e.I0R(426,"tr")(427,"td"),e.OEk(428,"nzSrcLoader"),e.C$Y(),e.I0R(429,"td"),e.OEk(430,"\u52a0\u8f7d\u5668"),e.C$Y(),e.I0R(431,"td")(432,"code"),e.OEk(433,"NzImageSrcLoader"),e.C$Y()(),e.I0R(434,"td")(435,"code"),e.OEk(436,"defaultImageSrcLoader"),e.C$Y()(),e.I0R(437,"td"),e.OEk(438,"\u2705"),e.C$Y()(),e.I0R(439,"tr")(440,"td"),e.OEk(441,"nzPriority"),e.C$Y(),e.I0R(442,"td"),e.OEk(443,"\u662f\u5426\u6dfb\u52a0 "),e.I0R(444,"a",26),e.OEk(445,"preload"),e.C$Y()(),e.I0R(446,"td")(447,"code"),e.OEk(448,"boolean"),e.C$Y()(),e.I0R(449,"td")(450,"code"),e.OEk(451,"false"),e.C$Y()(),e.wR5(452,"td"),e.C$Y()()(),e.I0R(453,"h3",45)(454,"span"),e.OEk(455,"NzImageSrcLoader"),e.C$Y(),e.I0R(456,"a",46),e.OEk(457,"#"),e.C$Y()(),e.I0R(458,"pre",16)(459,"code")(460,"span",17),e.OEk(461,"export"),e.C$Y(),e.OEk(462," type NzImageSrcLoader "),e.I0R(463,"span",34),e.OEk(464,"="),e.C$Y(),e.OEk(465," "),e.I0R(466,"span",18),e.OEk(467,"("),e.C$Y(),e.OEk(468,"params"),e.I0R(469,"span",18),e.OEk(470,":"),e.C$Y(),e.OEk(471," "),e.I0R(472,"span",18),e.OEk(473,"{"),e.C$Y(),e.OEk(474," src"),e.I0R(475,"span",18),e.OEk(476,":"),e.C$Y(),e.OEk(477," "),e.I0R(478,"span",17),e.OEk(479,"string"),e.C$Y(),e.I0R(480,"span",18),e.OEk(481,";"),e.C$Y(),e.OEk(482," width"),e.I0R(483,"span",18),e.OEk(484,":"),e.C$Y(),e.OEk(485," "),e.I0R(486,"span",17),e.OEk(487,"number"),e.C$Y(),e.OEk(488," "),e.I0R(489,"span",18),e.OEk(490,"}"),e.C$Y(),e.I0R(491,"span",18),e.OEk(492,")"),e.C$Y(),e.OEk(493," "),e.I0R(494,"span",34),e.OEk(495,"="),e.C$Y(),e.I0R(496,"span",34),e.OEk(497,">"),e.C$Y(),e.OEk(498," "),e.I0R(499,"span",17),e.OEk(500,"string"),e.C$Y(),e.I0R(501,"span",18),e.OEk(502,";"),e.C$Y()()(),e.I0R(503,"h2",47)(504,"span"),e.OEk(505,"\u6ce8\u610f"),e.C$Y(),e.I0R(506,"a",48),e.OEk(507,"#"),e.C$Y()(),e.I0R(508,"h3",49)(509,"span"),e.OEk(510,"nzSrcLoader"),e.C$Y(),e.I0R(511,"a",50),e.OEk(512,"#"),e.C$Y()(),e.I0R(513,"p"),e.OEk(514,"\u4f7f\u7528 "),e.I0R(515,"code"),e.OEk(516,"nzSrcLoader"),e.C$Y(),e.OEk(517," \u53ef\u4ee5\u5e2e\u52a9\u4f60\u586b\u5145\u8bf7\u6c42\u56fe\u7247\u7684\u5173\u952e\u4fe1\u606f\uff0c\u4f8b\u5982 "),e.I0R(518,"code"),e.OEk(519,"src"),e.C$Y(),e.OEk(520," \u548c "),e.I0R(521,"code"),e.OEk(522,"srcset"),e.C$Y(),e.OEk(523,"\uff0c\u9ed8\u8ba4\u4e3a\uff1a"),e.C$Y(),e.I0R(524,"pre",16)(525,"code")(526,"span",17),e.OEk(527,"export"),e.C$Y(),e.OEk(528," "),e.I0R(529,"span",17),e.OEk(530,"const"),e.C$Y(),e.OEk(531," defaultImageSrcLoader"),e.I0R(532,"span",18),e.OEk(533,":"),e.C$Y(),e.OEk(534," NzImageSrcLoader "),e.I0R(535,"span",34),e.OEk(536,"="),e.C$Y(),e.OEk(537," "),e.I0R(538,"span",18),e.OEk(539,"("),e.C$Y(),e.I0R(540,"span",18),e.OEk(541,"{"),e.C$Y(),e.OEk(542," src "),e.I0R(543,"span",18),e.OEk(544,"}"),e.C$Y(),e.I0R(545,"span",18),e.OEk(546,")"),e.C$Y(),e.OEk(547," "),e.I0R(548,"span",34),e.OEk(549,"="),e.C$Y(),e.I0R(550,"span",34),e.OEk(551,">"),e.C$Y(),e.OEk(552," "),e.I0R(553,"span",18),e.OEk(554,"{"),e.C$Y(),e.OEk(555,"\n  "),e.I0R(556,"span",17),e.OEk(557,"return"),e.C$Y(),e.OEk(558," src"),e.I0R(559,"span",18),e.OEk(560,";"),e.C$Y(),e.OEk(561,"\n"),e.I0R(562,"span",18),e.OEk(563,"}"),e.C$Y(),e.I0R(564,"span",18),e.OEk(565,";"),e.C$Y()()(),e.I0R(566,"p"),e.OEk(567,"\u5185\u7f6e\u7684\u56fe\u7247 CND \u521b\u5efa\u65b9\u6cd5"),e.C$Y(),e.I0R(568,"pre",16)(569,"code"),e.OEk(570,"\n"),e.I0R(571,"span",51),e.OEk(572,"/**\n * AliObjectsLoader return format\n * {domain}/{src}?x-oss-process=image/resize,w_{width}\n */"),e.C$Y(),e.OEk(573,"\n"),e.I0R(574,"span",17),e.OEk(575,"export"),e.C$Y(),e.OEk(576," "),e.I0R(577,"span",17),e.OEk(578,"function"),e.C$Y(),e.OEk(579," "),e.I0R(580,"span",35),e.OEk(581,"createAliObjectsLoader"),e.C$Y(),e.I0R(582,"span",18),e.OEk(583,"("),e.C$Y(),e.OEk(584,"domain"),e.I0R(585,"span",18),e.OEk(586,":"),e.C$Y(),e.OEk(587," "),e.I0R(588,"span",17),e.OEk(589,"string"),e.C$Y(),e.I0R(590,"span",18),e.OEk(591,")"),e.C$Y(),e.I0R(592,"span",18),e.OEk(593,":"),e.C$Y(),e.OEk(594," NzImageSrcLoader"),e.I0R(595,"span",18),e.OEk(596,";"),e.C$Y(),e.OEk(597,"\n\n"),e.I0R(598,"span",51),e.OEk(599,"/**\n * ImgixLoader return format\n * {domain}/{src}?format=auto&fit=max&w={width}\n */"),e.C$Y(),e.OEk(600,"\n"),e.I0R(601,"span",17),e.OEk(602,"export"),e.C$Y(),e.OEk(603," "),e.I0R(604,"span",17),e.OEk(605,"function"),e.C$Y(),e.OEk(606," "),e.I0R(607,"span",35),e.OEk(608,"createImgixLoader"),e.C$Y(),e.I0R(609,"span",18),e.OEk(610,"("),e.C$Y(),e.OEk(611,"domain"),e.I0R(612,"span",18),e.OEk(613,":"),e.C$Y(),e.OEk(614," "),e.I0R(615,"span",17),e.OEk(616,"string"),e.C$Y(),e.I0R(617,"span",18),e.OEk(618,")"),e.C$Y(),e.I0R(619,"span",18),e.OEk(620,":"),e.C$Y(),e.OEk(621," NzImageSrcLoader"),e.I0R(622,"span",18),e.OEk(623,";"),e.C$Y(),e.OEk(624,"\n\n"),e.I0R(625,"span",51),e.OEk(626,"/**\n * CloudinaryLoader return format\n * {domain}/c_limit,q_auto,w_{width}/{src}\n */"),e.C$Y(),e.OEk(627,"\n"),e.I0R(628,"span",17),e.OEk(629,"export"),e.C$Y(),e.OEk(630," "),e.I0R(631,"span",17),e.OEk(632,"function"),e.C$Y(),e.OEk(633," "),e.I0R(634,"span",35),e.OEk(635,"createCloudinaryLoader"),e.C$Y(),e.I0R(636,"span",18),e.OEk(637,"("),e.C$Y(),e.OEk(638,"domain"),e.I0R(639,"span",18),e.OEk(640,":"),e.C$Y(),e.OEk(641," "),e.I0R(642,"span",17),e.OEk(643,"string"),e.C$Y(),e.I0R(644,"span",18),e.OEk(645,")"),e.C$Y(),e.I0R(646,"span",18),e.OEk(647,":"),e.C$Y(),e.OEk(648," NzImageSrcLoader"),e.I0R(649,"span",18),e.OEk(650,";"),e.C$Y()()(),e.I0R(651,"h3",52)(652,"span"),e.OEk(653,"\u54cd\u5e94\u5f0f\u56fe\u7247\u548c\u9884\u52a0\u8f7d\u56fe\u7247"),e.C$Y(),e.I0R(654,"a",53),e.OEk(655,"#"),e.C$Y()(),e.I0R(656,"p"),e.OEk(657,"\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"),e.C$Y(),e.I0R(658,"ul")(659,"li")(660,"a",27),e.OEk(661,"preloading responsive images"),e.C$Y()(),e.I0R(662,"li")(663,"a",54),e.OEk(664,"next.js image component and image optimization"),e.C$Y()()(),e.eAF(),e.C$Y()()),2&a&&(e.yG2(),e.E7m("nzOffsetTop",16),e.yG2(),e.E7m("nzAffix",!1),e.yG2(69),e.E7m("nzGutter",8),e.yG2(),e.E7m("nzSpan",24),e.yG2(),e.E7m("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"),e.yG2(80),e.E7m("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"),e.yG2(170),e.E7m("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:[d.A,O.s9,O.mK,h.g,c.QD,c.ox,f.qG,F.If,x.k,A,D,S],encapsulation:2})}return n})(),U=(()=>{class n{constructor(){this.expanded=!1}goLink(t){window&&(window.location.hash=t)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEac

1h(t=>{t.nzExpanded=this.expanded,t.expandCode(this.expanded),t.check()})}static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275cmp=e.In1({type:n,selectors:[["nz-demo-experimental-image"]],viewQuery:function(a,o){if(1&a&&e.CC$(d.A,5),2&a){let s;e.wto(s=e.Gqi())&&(o.codeBoxes=s)}},decls:676,vars:16,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzAffix","nzClick"],["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,o){1&a&&(e.I0R(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),e.qCj("nzClick",function(i){return o.goLink(i)}),e.wR5(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5),e.C$Y()(),e.I0R(7,"section",6)(8,"h1"),e.OEk(9,"Image"),e.wR5(10,"span",7)(11,"span",8),e.I0R(12,"a",9),e.wR5(13,"span",10),e.C$Y()(),e.I0R(14,"section",6),e.EdD(),e.I0R(15,"blockquote",11)(16,"p"),e.OEk(17,"NG-ZORRO experiments are features that are released but not yet considered stable or production ready"),e.C$Y(),e.I0R(18,"p"),e.OEk(19,"Developers and users can opt-in into these features before they are fully released. But "),e.I0R(20,"strong"),e.OEk(21,"breaking changes"),e.C$Y(),e.OEk(22," may occur with any release."),e.C$Y()(),e.I0R(23,"h2",12)(24,"span"),e.OEk(25,"When To Use"),e.C$Y(),e.I0R(26,"a",13),e.OEk(27,"#"),e.C$Y()(),e.I0R(28,"ul")(29,"li"),e.OEk(30,"When you need the browser to prioritize image loading (needs to be handled in SSR)."),e.C$Y(),e.I0R(31,"li"),e.OEk(32,"When you need to optimize for HD displays (e.g. retina screens)."),e.C$Y(),e.I0R(33,"li"),e.OEk(34,"When using image CDN."),e.C$Y(),e.I0R(35,"li"),e.OEk(36,"More in "),e.I0R(37,"a",14),e.OEk(38,"Image documentation"),e.C$Y()(),e.I0R(39,"li"),e.OEk(40,"Next steps"),e.I0R(41,"ul")(42,"li"),e.OEk(43,"Add "),e.I0R(44,"a",15),e.OEk(45,"sizes"),e.C$Y(),e.OEk(46," attribute and responsive support."),e.C$Y()()()(),e.I0R(47,"pre",16)(48,"code")(49,"span",17),e.OEk(50,"import"),e.C$Y(),e.OEk(51," "),e.I0R(52,"span",18),e.OEk(53,"{"),e.C$Y(),e.OEk(54," NzImageModule "),e.I0R(55,"span",18),e.OEk(56,"}"),e.C$Y(),e.OEk(57," "),e.I0R(58,"span",17),e.OEk(59,"from"),e.C$Y(),e.OEk(60," "),e.I0R(61,"span",19),e.OEk(62,"'ng-zorro-antd/experimental/image'"),e.C$Y(),e.I0R(63,"span",18),e.OEk(64,";"),e.C$Y()()(),e.eAF(),e.C$Y(),e.I0R(65,"h2")(66,"span"),e.OEk(67,"Examples"),e.C$Y(),e.I0R(68,"span",20),e.qCj("click",function(){return o.expandAllCode()}),e.C$Y()()(),e.I0R(69,"div",21)(70,"div",22)(71,"nz-code-box",23),e.wR5(72,"nz-demo-experimental-image-preloading",24),e.I0R(73,"div",25),e.EdD(),e.I0R(74,"p"),e.OEk(75,"Setting "),e.I0R(76,"code"),e.OEk(77,"nzPriority"),e.C$Y(),e.OEk(78," will add the "),e.I0R(79,"code"),e.OEk(80,'<link rel="preload">'),e.C$Y(),e.OEk(81," tag when rendering server-side (SSR), and browsers will treat it as a high priority resource to load. You can see this in "),e.I0R(82,"a",26),e.OEk(83,"MDN - Preloading"),e.C$Y(),e.OEk(84,", "),e.I0R(85,"a",27),e.OEk(86,"web.dev - Preloading responsive images"),e.C$Y(),e.OEk(87," to learn more."),e.C$Y(),e.I0R(88,"p"),e.OEk(89,"Note: usually we only need to set "),e.I0R(90,"code"),e.OEk(91,"nzPriority"),e.C$Y(),e.OEk(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."),e.C$Y(),e.I0R(93,"pre",28)(94,"code")(95,"span",29)(96,"span",29)(97,"span",18),e.OEk(98,"<"),e.C$Y(),e.OEk(99,"

1ng-container"),e.C$Y(),e.OEk(100," "),e.I0R(101,"span",30),e.OEk(102,"*ngFor"),e.C$Y(),e.I0R(103,"span",31)(104,"span",18),e.OEk(105,"="),e.C$Y(),e.I0R(106,"span",18),e.OEk(107,'"'),e.C$Y(),e.OEk(108,"let product of products; index as i"),e.I0R(109,"span",18),e.OEk(110,'"'),e.C$Y()(),e.I0R(111,"span",18),e.OEk(112,">"),e.C$Y()(),e.OEk(113,"\n  "),e.I0R(114,"span",29)(115,"span",29)(116,"span",18),e.OEk(117,"<"),e.C$Y(),e.OEk(118,"nz-image"),e.C$Y(),e.OEk(119," "),e.I0R(120,"span",30),e.OEk(121,"..."),e.C$Y(),e.OEk(122," "),e.I0R(123,"span",30),e.OEk(124,"[nzPriority]"),e.C$Y(),e.I0R(125,"span",31)(126,"span",18),e.OEk(127,"="),e.C$Y(),e.I0R(128,"span",18),e.OEk(129,'"'),e.C$Y(),e.OEk(130,"i <"),e.I0R(131,"span",18),e.OEk(132,"="),e.C$Y(),e.OEk(133," 8"),e.I0R(134,"span",18),e.OEk(135,'"'),e.C$Y()(),e.I0R(136,"span",18),e.OEk(137,">"),e.C$Y()(),e.I0R(138,"span",29)(139,"span",29)(140,"span",18),e.OEk(141,"</"),e.C$Y(),e.OEk(142,"nz-image"),e.C$Y(),e.I0R(143,"span",18),e.OEk(144,">"),e.C$Y()(),e.OEk(145,"\n"),e.I0R(146,"span",29)(147,"span",29)(148,"span",18),e.OEk(149,"</"),e.C$Y(),e.OEk(150,"ng-container"),e.C$Y(),e.I0R(151,"span",18),e.OEk(152,">"),e.C$Y()()()(),e.eAF(),e.C$Y()(),e.I0R(153,"nz-code-box",32),e.wR5(154,"nz-demo-experimental-image-src-loader",24),e.I0R(155,"div",25),e.EdD(),e.I0R(156,"p"),e.OEk(157,"Custom "),e.I0R(158,"code"),e.OEk(159,"nzSrcLoader"),e.C$Y(),e.OEk(160," is used to resolve image URLs, or you can also use the built-in image CND provider's Loaders. "),e.wR5(161,"br"),e.OEk(162,"\nWe recommend always specifying the image size ("),e.I0R(163,"code"),e.OEk(164,"nzWidth"),e.C$Y(),e.OEk(165,", "),e.I0R(166,"code"),e.OEk(167,"nzHeight"),e.C$Y(),e.OEk(168,"), which can help improve the key metrics of the web experience "),e.I0R(169,"a",33),e.OEk(170,"CLS"),e.C$Y(),e.OEk(171,", and can also be used with the Loader to optimize the images using the image CND to improve the loading speed. "),e.wR5(172,"br"),e.OEk(173,"\nIf you want to use a different Loader in a different environment you can do the following."),e.C$Y(),e.I0R(174,"pre",16)(175,"code")(176,"span",17),e.OEk(177,"import"),e.C$Y(),e.OEk(178," "),e.I0R(179,"span",18),e.OEk(180,"{"),e.C$Y(),e.OEk(181," environment "),e.I0R(182,"span",18),e.OEk(183,"}"),e.C$Y(),e.OEk(184," "),e.I0R(185,"span",17),e.OEk(186,"from"),e.C$Y(),e.OEk(187," "),e.I0R(188,"span",19),e.OEk(189,"'environments/environment'"),e.C$Y(),e.I0R(190,"span",18),e.OEk(191,";"),e.C$Y(),e.OEk(192,"\n\n"),e.I0R(193,"span",17),e.OEk(194,"import"),e.C$Y(),e.OEk(195," "),e.I0R(196,"span",18),e.OEk(197,"{"),e.C$Y(),e.OEk(198," NzConfig"),e.I0R(199,"span",18),e.OEk(200,","),e.C$Y(),e.OEk(201," NZ_CONFIG "),e.I0R(202,"span",18),e.OEk(203,"}"),e.C$Y(),e.OEk(204," "),e.I0R(205,"span",17),e.OEk(206,"from"),e.C$Y(),e.OEk(207," "),e.I0R(208,"span",19),e.OEk(209,"'ng-zorro-antd/core/config'"),e.C$Y(),e.I0R(210,"span",18),e.OEk(211,";"),e.C$Y(),e.OEk(212,"\n"),e.I0R(213,"span",17),e.OEk(214,"import"),e.C$Y(),e.OEk(215," "),e.I0R(216,"span",18),e.OEk(217,"{"),e.C$Y(),e.OEk(218," createAliObjectsLoader"),e.I0R(219,"span",18),e.OEk(220,","),e.C$Y(),e.OEk(221," defaultImageSrcLoader "),e.I0R(222,"span",18),e.OEk(223,"}"),e.C$Y(),e.OEk(224," "),e.I0R(225,"span",17),e.OEk(226,"from"),e.C$Y(),e.OEk(227," "),e.I0R(228,"span",19),e.OEk(229,"'ng-zorro-antd/experimental/image'"),e.C$Y(),e.I0R(230,"span",18),e.OEk(231,";"),e.C$Y(),e.OEk(232,"\n\n"),e.I0R(233,"span",17),e.OEk(234,"const"),e.C$Y(),e.OEk(235," ngZorroConfig"),e.I0R(236,"span",18),e.OEk(237,":"),e.C$Y(),e.OEk(238," NzConfig "),e.I0R(239,"span",34),e.OEk(240,"="),e.C$Y(),e.OEk(241," "),e.I0R(242,"span",18),e.OEk(243,"{"),e.C$Y(),e.OEk(244,"\n  imageExperimental"),e.I0R(245,"span",18),e.OEk(246,":"),e.C$Y(),e.OEk(247," "),e.I0R(248,"span",18),e.OEk(249,"{"),e.C$Y(),e.OEk(250,"\n    nzSrcLoader"),e.I0R(251,"span",18),e.OEk(252,":"),e.C$Y(),e.OEk(253," environment"),e.I0R(254,"span",18),e.OEk(255,"."),e.C$Y(),e.OEk(256,"production "),e.I0R(257,"span",34),e.OEk(258,"?"),e.C$Y(),e.OEk(259," "),e.I0R(260,"span",35),e.OEk(261,"createAliObjectsLoader"),e.C$Y(),e.I0R(262,"span",18),e.OEk(263,"("),e.C$Y(),e.I0R(264,"span",19),e.OEk(265,"'https://zos.alipayobjects.com/rmsportal'"),e.C$Y(),e.I0R(266,"span",18),e.OEk(267,")"),e.C$Y(),e.OEk(268," "),e.I0R(269,"span",18),e.OEk(270,":"),e.C$Y(),e.OEk(271," defaultImageSrcLoader\n  "),e.I0R(272,"span",18),e.OEk(273,"}"),e.C$Y(),e.OEk(274,"\n"),e.I0R(275,"span",18),e.OEk(276,"}"),e.C$Y(),e.I0R(277,"span",18),e.OEk(278,";"),e.C$Y(),e.OEk(279,"\n\n@"),e.I0R(280,"span",35),e.OEk(281,"NgModule"),e.C$Y(),e.I0R(282,"span",18),e.OEk(283,"("),e.C$Y(),e.I0R(284,"span",18),e.OEk(285,"{"),e.C$Y(),e.OEk(286,"\n  "),e.I0R(287,"span",34),e.OEk(288,"..."),e.C$Y(),e.OEk(289,"\n  providers"),e.I0R(290,"span",18),e.OEk(291,":"),e.C$Y(),e.OEk(292," "),e.I0R(293,"span",18),e.OEk(294,"["),e.C$Y(),e.OEk(295,"\n    "),e.I0R(296,"span",18),e.OEk(297,"{"),e.C$Y(),e.OEk(298," provide"),e.I0R(299,"span",18),e.OEk(300,":"),e.C$Y(),e.OEk(301," NZ_CONFIG"),e.I0R(302,"span",18),e.OEk(303,","),e.C$Y(),e.OEk(304," useValue"),e.I0R(305,"span",18),e.OEk(306,":"),e.C$Y(),e.OEk(307," ngZorroConfig "),e.I0R(308,"span",18),e.OEk(309,"}"),e.C$Y(),e.OEk(310,"\n  "),e.I0R(311,"span",18),e.OEk(312,"]"),e.C$Y(),e.OEk(313,"\n"),e.I0R(314,"

1span",18),e.OEk(315,"}"),e.C$Y(),e.I0R(316,"span",18),e.OEk(317,")"),e.C$Y(),e.OEk(318,"\n"),e.I0R(319,"span",17),e.OEk(320,"export"),e.C$Y(),e.OEk(321," "),e.I0R(322,"span",17),e.OEk(323,"class"),e.C$Y(),e.OEk(324," "),e.I0R(325,"span",36),e.OEk(326,"AppModule"),e.C$Y(),e.OEk(327," "),e.I0R(328,"span",18),e.OEk(329,"{"),e.C$Y(),e.I0R(330,"span",18),e.OEk(331,"}"),e.C$Y()()(),e.eAF(),e.C$Y()(),e.I0R(332,"nz-code-box",37),e.wR5(333,"nz-demo-experimental-image-auto-srcset",24),e.I0R(334,"div",25),e.EdD(),e.I0R(335,"p"),e.OEk(336,"Using "),e.I0R(337,"code"),e.OEk(338,"nzAutoSrcset"),e.C$Y(),e.OEk(339," requires to specify the image size ("),e.I0R(340,"code"),e.OEk(341,"nzWidth"),e.C$Y(),e.OEk(342,", "),e.I0R(343,"code"),e.OEk(344,"nzHeight"),e.C$Y(),e.OEk(345,"), with the Loader automatically generating "),e.I0R(346,"a",38),e.OEk(347,"srcset"),e.C$Y(),e.OEk(348," for different pixel densities."),e.C$Y(),e.eAF(),e.C$Y()()()(),e.I0R(349,"section",39),e.EdD(),e.I0R(350,"h2",40)(351,"span"),e.OEk(352,"API"),e.C$Y(),e.I0R(353,"a",41),e.OEk(354,"#"),e.C$Y()(),e.I0R(355,"h3",42)(356,"span"),e.OEk(357,"nz-image"),e.C$Y(),e.I0R(358,"label",43),e.OEk(359,"component"),e.C$Y(),e.I0R(360,"a",44),e.OEk(361,"#"),e.C$Y()(),e.I0R(362,"table")(363,"thead")(364,"tr")(365,"th"),e.OEk(366,"Property"),e.C$Y(),e.I0R(367,"th"),e.OEk(368,"Description"),e.C$Y(),e.I0R(369,"th"),e.OEk(370,"Type"),e.C$Y(),e.I0R(371,"th"),e.OEk(372,"Default"),e.C$Y(),e.I0R(373,"th"),e.OEk(374,"Global Config"),e.C$Y()()(),e.I0R(375,"tbody")(376,"tr")(377,"td"),e.OEk(378,"nzSrc"),e.C$Y(),e.I0R(379,"td"),e.OEk(380,"URL"),e.C$Y(),e.I0R(381,"td")(382,"code"),e.OEk(383,"string"),e.C$Y()(),e.I0R(384,"td"),e.OEk(385,"-"),e.C$Y(),e.wR5(386,"td"),e.C$Y(),e.I0R(387,"tr")(388,"td"),e.OEk(389,"nzAlt"),e.C$Y(),e.I0R(390,"td"),e.OEk(391,"Alt"),e.C$Y(),e.I0R(392,"td")(393,"code"),e.OEk(394,"string"),e.C$Y()(),e.I0R(395,"td"),e.OEk(396,"-"),e.C$Y(),e.wR5(397,"td"),e.C$Y(),e.I0R(398,"tr")(399,"td"),e.OEk(400,"nzWidth"),e.C$Y(),e.I0R(401,"td"),e.OEk(402,"Width"),e.C$Y(),e.I0R(403,"td")(404,"code"),e.OEk(405,"number|string"),e.C$Y()(),e.I0R(406,"td")(407,"code"),e.OEk(408,"auto"),e.C$Y()(),e.wR5(409,"td"),e.C$Y(),e.I0R(410,"tr")(411,"td"),e.OEk(412,"nzHeight"),e.C$Y(),e.I0R(413,"td"),e.OEk(414,"Height"),e.C$Y(),e.I0R(415,"td")(416,"code"),e.OEk(417,"number|string"),e.C$Y()(),e.I0R(418,"td")(419,"code"),e.OEk(420,"auto"),e.C$Y()(),e.wR5(421,"td"),e.C$Y(),e.I0R(422,"tr")(423,"td"),e.OEk(424,"nzAutoSrcset"),e.C$Y(),e.I0R(425,"td"),e.OEk(426,"Whether to optimize image loading"),e.C$Y(),e.I0R(427,"td")(428,"code"),e.OEk(429,"boolean"),e.C$Y()(),e.I0R(430,"td")(431,"code"),e.OEk(432,"false"),e.C$Y()(),e.I0R(433,"td"),e.OEk(434,"\u2705"),e.C$Y()(),e.I0R(435,"tr")(436,"td"),e.OEk(437,"nzSrcLoader"),e.C$Y(),e.I0R(438,"td"),e.OEk(439,"Loader"),e.C$Y(),e.I0R(440,"td")(441,"code"),e.OEk(442,"NzImageSrcLoader"),e.C$Y()(),e.I0R(443,"td")(444,"code"),e.OEk(445,"defaultImageSrcLoader"),e.C$Y()(),e.I0R(446,"td"),e.OEk(447,"\u2705"),e.C$Y()(),e.I0R(448,"tr")(449,"td"),e.OEk(450,"nzPriority"),e.C$Y(),e.I0R(451,"td"),e.OEk(452,"Whether to add "),e.I0R(453,"a",26),e.OEk(454,"preload"),e.C$Y(),e.OEk(455," (only SSR)"),e.C$Y(),e.I0R(456,"td")(457,"code"),e.OEk(458,"boolean"),e.C$Y()(),e.I0R(459,"td")(460,"code"),e.OEk(461,"false"),e.C$Y()(),e.I0R(462,"td"),e.OEk(463,"\u2705"),e.C$Y()()()(),e.I0R(464,"h3",45)(465,"span"),e.OEk(466,"NzImageSrcLoader"),e.C$Y(),e.I0R(467,"a",46),e.OEk(468,"#"),e.C$Y()(),e.I0R(469,"pre",16)(470,"code")(471,"span",17),e.OEk(472,"export"),e.C$Y(),e.OEk(473," type NzImageSrcLoader "),e.I0R(474,"span",34),e.OEk(475,"="),e.C$Y(),e.OEk(476," "),e.I0R(477,"span",18),e.OEk(478,"("),e.C$Y(),e.OEk(479,"params"),e.I0R(480,"span",18),e.OEk(481,":"),e.C$Y(),e.OEk(482," "),e.I0R(483,"span",18),e.OEk(484,"{"),e.C$Y(),e.OEk(485," src"),e.I0R(486,"span",18),e.OEk(487,":"),e.C$Y(),e.OEk(488," "),e.I0R(489,"span",17),e.OEk(490,"string"),e.C$Y(),e.I0R(491,"span",18),e.OEk(492,";"),e.C$Y(),e.OEk(493," width"),e.I0R(494,"span",18),e.OEk(495,":"),e.C$Y(),e.OEk(496," "),e.I0R(497,"span",17),e.OEk(498,"number"),e.C$Y(),e.OEk(499," "),e.I0R(500,"span",18),e.OEk(501,"}"),e.C$Y(),e.I0R(502,"span",18),e.OEk(503,")"),e.C$Y(),e.OEk(504," "),e.I0R(505,"span",34),e.OEk(506,"="),e.C$Y(),e.I0R(507,"span",34),e.OEk(508,">"),e.C$Y(),e.OEk(509," "),e.I0R(510,"span",17),e.OEk(511,"string"),e.C$Y(),e.I0R(512,"span",18),e.OEk(513,";"),e.C$Y()()(),e.I0R(514,"h2",47)(515,"span"),e.OEk(516,"Note"),e.C$Y(),e.I0R(517,"a",48),e.OEk(518,"#"),e.C$Y()(),e.I0R(519,"h3",49)(520,"span"),e.OEk(521,"nzSrcLoader"),e.C$Y(),e.I0R(522,"a",50),e.OEk(523,"#"),e.C$Y()(),e.I0R(524,"p"),e.OEk(525,"Using "),e.I0R(526,"code"),e.OEk(527,"nzSrcLoader"),e.C$Y(),e.OEk(528," helps you to fill in key information about the requested image, such as "),e.I0R(529,"code"),e.OEk(530,"src"),e.C$Y(),e.OEk(531," and "),e.I0R(532,"code"),e.OEk(533,"width"),e.C$Y(),e.OEk(534,", which defaults to"),e.C$Y(),e.I0R(535,"pre",16)(536,"code")(537,"span",17),e.OEk(538,"export"),e.C$Y(),e.OEk(539," "),e.I0R(540,"span",17),e.OEk(541,"const"),e.C$Y(),e.OEk(542," defaultImageSrcLoader"),e.I0R(543,"span",18),e.OEk(544,":"),e.C$Y(),e.OEk(545," NzImageSrcLoader "),e.I0R(546,"span",34),e.OEk(547,"="),e.C$Y(),e.OEk(548," "),e.I0R(549,"span",18),e.OEk(550,"("),e.C$Y(),e.I0R(551,"span",18),e.OEk(552,"{"),e.C$Y(),e.OEk(553," src "),e.I0R(554,"span",18),e.OEk(555,"}"),e.C$Y(),e.I0R(556,"span",18),e.OEk(557,")"),e.C$Y(),e.OEk(558," "),e.I0R(559,"span",34),e.OEk(560,"="),e.C$Y(),e.I0R(561,"span",34),e.OEk(562,">"),e.C$Y(),e.OEk(563," "),e.I0R(564,"span",18),e.OEk(565,"{"),e.C$Y(),e.OEk(566,"\n  "),e.I0R(567,"span",17),e.OEk(568,"return"),e.C$Y(),e.OEk(569," src"),e.I0R(570,"span",18),e.OEk(571,";"),e.C$Y(),e.OEk(572,"\n"),e.I0R(573,"span",18),e.OEk(574,"}"),e.C$Y(),e.I0R(575,"span",18),e.OEk(576,";"),e.C$Y()()(),e.I0R(577,"p"),e.OEk(578,"Built-in image CND creation method"),e.C$Y(),e.I0R(579,"pre",16)(580,"code"),e.OEk(581,"\n"),e.I0R(582,"span",51),e.OEk(583,"/**\n * AliObjectsLoader return format\n * {domain}/{src}?x-oss-process=image/resize,w_{width}\n */"),e.C$Y(),e.OEk(584,"\n"),e.I0R(585,"span",17),e.OEk(586,"export"),e.C$Y(),e.OEk(587," "),e.I0R(588,"span",17),e.OEk(589,"function"),e.C$Y(),e.OEk(590," "),e.I0R(591,"span",35),e.OEk(592,"createAliObjectsLoader"),e.C$Y(),e.I0R(593,"span",18),e.OEk(594,"("),e.C$Y(),e.OEk(595,"domain"),e.I0R(596,"span",18),e.OEk(597,":"),e.C$Y(),e.OEk(598," "),e.I0R(599,"span",17),e.OEk(600,"string"),e.C$Y(),e.I0R(601,"span",18),e.OEk(602,")"),e.C$Y(),e.I0R(603,"span",18),e.OEk(604,":"),e.C$Y(),e.OEk(605," NzImageSrcLoader"),e.I0R(606,"span",18),e.OEk(607,";"),e.C$Y(),e.OEk(608,"\n\n"),e.I0R(609,"span",51),e.OEk(610,"/**\n * ImgixLoader return format\n * {domain}/{src}?format=auto&fit=max&w={width}\n */"),e.C$Y(),e.OEk(611,"\n"),e.I0R(612,"span",17),e.OEk(613,"export"),e.C$Y(),e.OEk(614," "),e.I0R(615,"span",17),e.OEk(616,"function"),e.C$Y(),e.OEk(617," "),e.I0R(618,"span",35),e.OEk(619,"createImgixLoader"),e.C$Y(),e.I0R(620,"span",18),e.OEk(621,"("),e.C$Y(),e.OEk(622,"domain"),e.I0R(623,"span",18),e.OEk(624,":"),e.C$Y(),e.OEk(625," "),e.I0R(626,"span",17),e.OEk(627,"string"),e.C$Y(),e.I0R(628,"span",18),e.OEk(629,")"),e.C$Y(),e.I0R(630,"span",18),e.OEk(631,":"),e.C$Y(),e.OEk(632," NzImageSrcLoader"),e.I0R(633,"span",18),e.OEk(634,";"),e.C$Y(),e.OEk(635,"\n\n"),e.I0R(636,"span",51),e.OEk(637,"/**\n * CloudinaryLoader return format\n * {domain}/c_limit,q_auto,w_{width}/{src}\n */"),e.C$Y(),e.OEk(638,"\n"),e.I0R(639,"span",17),e.OEk(640,"export"),e.C$Y(),e.OEk(641," "),e.I0R(642,"span",17),e.OEk(643,"function"),e.C$Y(),e.OEk(644," "),e.I0R(645,"span",35),e.OEk(646,"createCloudinaryLoader"),e.C$Y(),e.I0R(647,"span",18),e.OEk(648,"("),e.C$Y(),e.OEk(649,"domain"),e.I0R(650,"span",18),e.OEk(651,":"),e.C$Y(),e.OEk(652," "),e.I0R(653,"span",17),e.OEk(654,"string"),e.C$Y(),e.I0R(655,"span",18),e.OEk(656,")"),e.C$Y(),e.I0R(657,"span",18),e.OEk(658,":"),e.C$Y(),e.OEk(659," NzImageSrcLoader"),e.I0R(660,"span",18),e.OEk(661,";"),e.C$Y()()(),e.I0R(662,"h3",52)(663,"span"),e.OEk(664,"Responsive images and preloaded images"),e.C$Y(),e.I0R(665,"a",53),e.OEk(666,"#"),e.C$Y()(),e.I0R(667,"p"),e.OEk(668,"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."),e.C$Y(),e.I0R(669,"ul")(670,"li")(671,"a",27),e.OEk(672,"preloading responsive images"),e.C$Y()(),e.I0R(673,"li")(674,"a",54),e.OEk(675,"next.js image component and image optimization"),e.C$Y()()(),e.eAF(),e.C$Y()()),2&a&&(e.yG2(),e.E7m("nzOffsetTop",16),e.yG2(),e.E7m("nzAffix",!1),e.yG2(67),e.E7m("nzGutter",8),e.yG2(),e.E7m("nzSpan",24),e.yG2(),e.E7m("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"),e.yG2(82),e.E7m("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"),e.yG2(179),e.E7m("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:[d.A,O.s9,O.mK,h.g,c.QD,c.ox,f.qG,F.If,x.k,A,D,S],encapsulation:2})}return n})(),j=(()=>{class n{static#e=this.\u0275fac=function(a){return new(a||n)};static#n=this.\u0275mod=e.a4G({type:n});static#a=this.\u0275inj=e.s3X({imports:[y.K,T,w.qQ.forChild([{path:"en",component:U},{path:"zh",component:W}])]})}return n})()}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.