https://preview-8987-ng-zorro-antd.surge.sh/chunk-CKTPIEXX.js

1import{c as ze,d as v}from"./chunk-NV7ZY74V.js";import{a as f,g as j,h as G,j as U}from"./chunk-YCX7R6MV.js";import"./chunk-M3GNLX5T.js";import"./chunk-QPELCSIR.js";import{D as H,Ga as M,Ic as R,Jc as O,L as ce,Mc as W,Ub as Se,fc as T,ta as Ee,ua as A}from"./chunk-OOKOVFMR.js";import{Ac as I,Bc as D,Gc as e,Ib as S,Jb as pe,Ub as ue,Vb as s,aa as oe,f as le,hc as n,hd as xe,ia as de,ic as t,jc as r,l as F,ld as P,m as g,qc as C,rb as u,wa as se,xa as c,xb as B,ya as E,zc as b}from"./chunk-NACBYLXS.js";import"./chunk-EQDQRRRY.js";var Fe=["imageRef"];function ge(m){return typeof m=="number"||/^(\d)+(px)?$/.test(m)}function Ce(m){return m[0]==="/"?m.slice(1):m}var fe=({src:m})=>m;function Z(m){return({src:o,width:a})=>{let d=ce(a)?"":`?x-oss-process=image/resize,w_${a}`;return`${m}/${Ce(o)}${d}`}}var he="imageExperimental",be=[16,32,48,64,96,128,256,384,640,750,828,1080,1200,1920,2048,3840],N=(()=>{let m,o=[],a=[],d,x=[],h=[],K,X=[],ee=[],te,ne=[],ie=[],ae,re=[],me=[];return class J{static{let p=typeof Symbol=="function"&&Symbol.metadata?Object.create(null):void 0;m=[A()],d=[A()],K=[A()],te=[A()],ae=[A()],F(null,null,m,{kind:"field",name:"nzSrcLoader",static:!1,private:!1,access:{has:i=>"nzSrcLoader"in i,get:i=>i.nzSrcLoader,set:(i,l)=>{i.nzSrcLoader=l}},metadata:p},o,a),F(null,null,d,{kind:"field",name:"nzAutoSrcset",static:!1,private:!1,access:{has:i=>"nzAutoSrcset"in i,get:i=>i.nzAutoSrcset,set:(i,l)=>{i.nzAutoSrcset=l}},metadata:p},x,h),F(null,null,K,{kind:"field",name:"nzFallback",static:!1,private:!1,access:{has:i=>"nzFallback"in i,get:i=>i.nzFallback,set:(i,l)=>{i.nzFallback=l}},metadata:p},X,ee),F(null,null,te,{kind:"field",name:"nzPlaceholder",static:!1,private:!1,access:{has:i=>"nzPlaceholder"in i,get:i=>i.nzPlaceholder,set:(i,l)=>{i.nzPlaceholder=l}},metadata:p},ne,ie),F(null,null,ae,{kind:"field",name:"nzDisablePreview",static:!1,private:!1,access:{has:i=>"nzDisablePreview"in i,get:i=>i.nzDisablePreview,set:(i,l)=>{i.nzDisablePreview=l}},metadata:p},re,me),p&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:p})}cdr;nzConfigService;imagePreloadService;_nzModuleName=he;nzSrc="";nzAlt="";nzWidth="auto";nzHeight="auto";nzSrcLoader=g(this,o,fe);nzAutoSrcset=(g(this,a),g(this,x,!1));nzPriority=(g(this,h),!1);nzFallback=g(this,X,null);nzPlaceholder=(g(this,ee),g(this,ne,null));nzDisablePreview=(g(this,ie),g(this,re,!1));imageRef=g(this,me);src="";width="auto";height="auto";srcset="";internalImage;destroy$=new le;reloadDisposeHandler=()=>{};constructor(p,i,l){this.cdr=p,this.nzConfigService=i,this.imagePreloadService=l,this.nzConfigService.getConfigChangeEventForComponent(he).pipe(oe(this.destroy$)).subscribe(()=>{this.composeImageAttrs(),this.cdr.markForCheck()})}ngOnInit(){this.nzPriority&&this.preload()}ngOnChanges(p){let{nzLoader:i,nzSrc:l,nzOptimize:z}=p;(l||i||z)&&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?!ge(this.nzWidth)||!ge(this.nzHeight)?(H('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")?(H("SVG does not need to be optimized"),!1):this.nzSrc.startsWith("data:")?(H("Data URLs cannot be optimized"),!1):!0:!1}composeImageAttrs(){let p=this.getLoader();if(!this.optimizable()){this.src=p({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 i=this.convertWidths(this.width,be);this.src=p({src:this.nzSrc,width:i[0]}),this.srcset=i.map((l,z)=>`${p({src:this.nzSrc,width:l})} ${z+1}x`).join(", ")}getLoader(){return this.nzSrcLoader||fe}convertWidths(p,i){let l=[...i].sort((z,q)=>z-q);return[...new Set([p,p*2].map(z=>l.find(q=>q>=z)||z))]}static \u0275fac=function(i){return new(i||J)(B(xe),B(Ee),B(Se))};static \u0275cmp=S({type:J,selectors:[["nz-image"]],viewQuery:function(i,l){if(i&1&&b(Fe,5),i&2){let z;I(z=D())&&(l.imageRef=z.first)}},inputs:{nzSrc:"nzSrc",nzAlt:"nzAlt",nzWidth:"nzWidth",nzHeight:"nzHeight",nzSrcLoader:"nzSrcLoader",nzAutoSrcset:[2,"nzAutoSrcset","nzAutoSrcset",P],nzPriority:[2,"nzPriority","nzPriority",P],nzFallback:"nzFallback",nzPlaceholder:"nzPlaceholder",nzDisablePreview:[2,"nzDisablePreview","nzDisablePreview",P]},exportAs:["nzImage"],features:[se],decls:2,vars:9,consts:[["imageRef",""],["nz-image","",3,"nzSrc","nzSrcset","nzDisablePreview","nzFallback","nzPlaceholder"]],template:function(i,l){i&1&&r(0,"img",1,0),i&2&&(s("nzSrc",l.src)("nzSrcset",l.srcset)("nzDisablePreview",l.nzDisablePreview)("nzFallback",l.nzFallback)("nzPlaceholder",l.nzPlaceholder),ue("width",l.width)("height",l.height)("srcset",l.srcset)("alt",l.nzAlt||null))},dependencies:[ze],encapsulation:2,changeDetection:0})}})(),y=(()=>{class m{static \u0275fac=function(d){return new(d||m)};static \u0275mod=pe({type:m});static \u0275inj=de({})}return m})();var w=class m{src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";loader=Z("https://zos.alipayobjects.com/rmsportal");static \u0275fac=function(a){return new(a||m)};static \u0275cmp=S({type:m,selectors:[["nz-demo-experimental-image-auto-srcset"]],decls:1,vars:2,consts:[["nzWidth","200","nzHeight","200","nzAutoSrcset","",3,"nzSrc","nzSrcLoader"]],template:function(a,d){a&1&&r(0,"nz-image",0),a&2&&s("nzSrc",d.src

1)("nzSrcLoader",d.loader)},dependencies:[v,y,N],encapsulation:2})};var k=class m{src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";static \u0275fac=function(a){return new(a||m)};static \u0275cmp=S({type:m,selectors:[["nz-demo-experimental-image-preloading"]],decls:1,vars:1,consts:[["nzWidth","200","nzHeight","200","nzPriority","",3,"nzSrc"]],template:function(a,d){a&1&&r(0,"nz-image",0),a&2&&s("nzSrc",d.src)},dependencies:[v,y,N],encapsulation:2})};var L=class m{src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";loader=Z("https://zos.alipayobjects.com/rmsportal");static \u0275fac=function(a){return new(a||m)};static \u0275cmp=S({type:m,selectors:[["nz-demo-experimental-image-src-loader"]],decls:1,vars:2,consts:[["nzWidth","200","nzHeight","200",3,"nzSrc","nzSrcLoader"]],template:function(a,d){a&1&&r(0,"nz-image",0),a&2&&s("nzSrc",d.src)("nzSrcLoader",d.loader)},dependencies:[v,y,N],encapsulation:2})};var V=class m{expanded=!1;codeBoxes;goLink(o){window&&(window.location.hash=o)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(o=>o.expandCode(this.expanded))}static \u0275fac=function(a){return new(a||m)};static \u0275cmp=S({type:m,selectors:[["nz-demo-experimental-image"]],viewQuery:function(a,d){if(a&1&&b(f,5),a&2){let x;I(x=D())&&(d.codeBoxes=x)}},decls:642,vars:19,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"],["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"],["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","nzIframe","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"],[1,"token","punctuation","attr-equals"],["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","nzIframe","nzIframeHeight","nzHref"],["href","https://web.dev/cls/","target","_blank","rel","noopener"],[1,"token","operator"],[1,"token","decorator"],[1,"token","at","operator"],[1,"token","function"],[1,"token","comment"],[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","nzIframe","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"],[1,"token","builtin"],["id","\u6CE8\u610F"],["onclick","window.location.hash = '\u6CE8\u610F'",1,"anchor"],["id","nzsrcloader"],["onclick","window.location.hash = 'nzsrcloader'",1,"anchor"],[1,"token","function-variable","function"],["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,d){a&1&&(n(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),C("nzClick",function(h){return d.goLink(h)}),r(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5),t()(),n(7,"section",6)(8,"h1"),e(9,"Image"),n(10,"span",7),e(11,"\u56FE\u7247"),t(),r(12,"span",8),n(13,"a",9),r(14,"nz-icon",10),t()(),n(15,"section",6),E(),n(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"),t(),n(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 "),n(21,"strong"),e(22,"breaking changes"),t(),e(23,"\u3002"),t()(),n(24,"h2",12)(25,"span"),e(26,"\u4F55\u65F6\u4F7F\u7528"),t(),n(27,"a",13),e(28,"#"),t()(),n(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"),t(),n(32,"li"),e(33,"\u9700\u8981\u5BF9\u9AD8\u6E05\u663E\u793A\u5668\uFF08\u5982\u89C6\u7F51\u819C\u5C4F\uFF09\u4F18\u5316\u65F6\u3002"),t(),n(34,"li"),e(35,"\u4F7F\u7528\u56FE\u7247 CDN \u670D\u52A1\u65F6\u3002"),t(),n(36,"li"),e(37,"\u4EE5\u53CA "),n(38,"a",14),e(39,"Image documentation"),t(),e(40," \u4E2D\u7684\u529F\u80FD"),t(),n(41,"li"),e(42,"\u4E0B\u4E00\u6B65\u8BA1\u5212"),n(43,"ul")(44,"li"),e(45,"\u6DFB\u52A0 "),n(46,"a",15),e(47,"sizes"),t(),e(48," \u5C5E\u6027\u53CA\u54CD\u5E94\u5F0F\u7684\u652F\u6301"),t()()()(),n(49,"pre")(50,"code",16)(51,"span",17),e(52,"import"),t(),e(53," "),n(54,"span",18),e(55,"{"),t(),e(56," NzImageModule "),n(57,"span",18),e(58,"}"),t(),e(59," "),n(60,"span",17),e(61,"from"),t(),e(62," "),n(63,"span",19),e(64,"'ng-zorro-antd/experimental/image'"),t(),n(65,"span",18),e(66,";"),t(),e(67,`
2`),t()(),c(),t(),n(68,"h2")(69,"span"),e(70,"\u4EE3\u7801\u6F14\u793A"),t(),n(71,"nz-icon",20),C("click",function(){return d.expandAllCode()}),t()()(),n(72,"div",21)(73,"div",22)(74,"nz-code-box",23),r(75,"nz-demo-experimental-image-preloading",24),n(76,"div",25),E(),n(77,"p"),e(78,"\u8BBE\u7F6E "),n(79,"code"),e(80,"nzPriority"),t(),e(81," \u5C06\u4F1A\u5728\u670D\u52A1\u7AEF\u6E32\u67D3(SSR) \u65F6\u6DFB\u52A0 "),n(82,"code"),e(83,'<link rel="preload">'),t(),e(84," \u6807\u7B7E\uFF0C\u6D4F\u89C8\u5668\u4F1A\u5C06\u5176\u89C6\u4E3A\u9AD8\u4F18\u5148\u7EA7\u8D44\u6E90\u52A0\u8F7D\u3002\u4F60\u53EF\u4EE5\u5728 "),n(85,"a",26),e(86,"MDN - Preloading"),t(),e(87,"\u3001"),n(88,"a",27),e(89,"web.dev - Preloading responsive images"),t(),e(90," \u4E86\u89E3\u66F4\u591A\u3002"),t(),n(91,"p"),e(92,"\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C\u901A\u5E38\u53EA\u9700\u8981\u4E3A\u9996\u5C4F\u56FE\u7247\u8BBE\u7F6E "),n(93,"code"),e(94,"nzPriority"),t(),e(95," \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"),t(),n(96,"pre")(97,"code",28),e(98,`@for (product of products; track product)
3  `),n(99,"span",29)(100,"span",29)(101,"span",18),e(102,"<"),t(),e(103,"nz-image"),t(),e(104," "),n(105,"span",30),e(106,"[nzPriority]"),t(),n(107,"span",31)(108,"span",32),e(109,"="),t(),n(110,"span",18),e(111,'"'),t(),e(112,"$index <= 8"),n(113,"span",18),e(114,'"'),t()(),n(115,"span",18),e(116,">"),t()(),n(117,"span",29)(118,"span",29)(119,"span",18),e(120,"</"),t(),e(121,"nz-image"),t(),n(122,"span",18),e(123,">"),t()(),e(124,`
4}
5`),t()(),c(),t()(),n(125,"nz-code-box",33),r(126,"nz-demo-experimental-image-src-loader",24),n(127,"div",25),E(),n(128,"p"),e(129,"\u81EA\u5B9A\u4E49 "),n(130,"code"),e(131,"nzSrcLoader"),t(),e(132," \u7528\u4E8E\u89E3\u6790\u56FE\u7247 URLs, \u4E5F\u53EF\u4EE5\u4F7F\u7528\u5185\u7F6E\u7684\u56FE\u7247 CND \u63D0\u4F9B\u5546\u7684 Loaders\u3002 "),r(133,"br"),e(134,`
6\u6211\u4EEC\u5EFA\u8BAE\u59CB\u7EC8\u6307\u5B9A\u56FE\u7247\u7684\u5C3A\u5BF8(`),n(135,"code"),e(136,"nzWidth"),t(),e(137,"\u3001"),n(138,"code"),e(139,"nzHeight"),t(),e(140,")\uFF0C\u4E0D\u4EC5\u53EF\u4EE5\u5E2E\u52A9\u63D0\u9AD8\u7F51\u9875\u4F53\u9A8C\u7684\u5173\u952E\u6307\u6807 "),n(141,"a",34),e(142,"CLS"),t(),e(143,"\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 "),r(144,"br"),e(145,`
7\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`),t(),n(146,"pre")(147,"code",16)(148,"span",17),e(149,"import"),t(),e(150," "),n(1

751,"span",18),e(152,"{"),t(),e(153," environment "),n(154,"span",18),e(155,"}"),t(),e(156," "),n(157,"span",17),e(158,"from"),t(),e(159," "),n(160,"span",19),e(161,"'environments/environment'"),t(),n(162,"span",18),e(163,";"),t(),e(164,`
8
9`),n(165,"span",17),e(166,"import"),t(),e(167," "),n(168,"span",18),e(169,"{"),t(),e(170," NzConfig"),n(171,"span",18),e(172,","),t(),e(173," provideNzConfig "),n(174,"span",18),e(175,"}"),t(),e(176," "),n(177,"span",17),e(178,"from"),t(),e(179," "),n(180,"span",19),e(181,"'ng-zorro-antd/core/config'"),t(),n(182,"span",18),e(183,";"),t(),e(184,`
10`),n(185,"span",17),e(186,"import"),t(),e(187," "),n(188,"span",18),e(189,"{"),t(),e(190," aliObjectsLoader"),n(191,"span",18),e(192,","),t(),e(193," defaultImageSrcLoader "),n(194,"span",18),e(195,"}"),t(),e(196," "),n(197,"span",17),e(198,"from"),t(),e(199," "),n(200,"span",19),e(201,"'ng-zorro-antd/experimental/image'"),t(),n(202,"span",18),e(203,";"),t(),e(204,`
11
12`),n(205,"span",17),e(206,"const"),t(),e(207," nzConfig"),n(208,"span",35),e(209,":"),t(),e(210," NzConfig "),n(211,"span",35),e(212,"="),t(),e(213," "),n(214,"span",18),e(215,"{"),t(),e(216,`
13  imageExperimental`),n(217,"span",35),e(218,":"),t(),e(219," "),n(220,"span",18),e(221,"{"),t(),e(222,`
14    nzSrcLoader`),n(223,"span",35),e(224,":"),t(),e(225," environment"),n(226,"span",18),e(227,"."),t(),e(228,"production "),n(229,"span",35),e(230,"?"),t(),e(231," aliObjectsLoader "),n(232,"span",35),e(233,":"),t(),e(234,` defaultImageSrcLoader
15  `),n(235,"span",18),e(236,"}"),t(),e(237,`
16`),n(238,"span",18),e(239,"}"),t(),n(240,"span",18),e(241,";"),t(),e(242,`
17
18`),n(243,"span",36)(244,"span",37),e(245,"@"),t(),n(246,"span",38),e(247,"NgModule"),t()(),n(248,"span",18),e(249,"("),t(),n(250,"span",18),e(251,"{"),t(),e(252,`
19  `),n(253,"span",39),e(254,"// ..."),t(),e(255,`
20  providers`),n(256,"span",35),e(257,":"),t(),e(258," "),n(259,"span",18),e(260,"["),t(),e(261,`
21    `),n(262,"span",38),e(263,"provideNzConfig"),t(),n(264,"span",18),e(265,"("),t(),e(266,"nzConfig"),n(267,"span",18),e(268,")"),t(),e(269,`
22  `),n(270,"span",18),e(271,"]"),t(),e(272,`
23`),n(273,"span",18),e(274,"}"),t(),n(275,"span",18),e(276,")"),t(),e(277,`
24`),n(278,"span",17),e(279,"export"),t(),e(280," "),n(281,"span",17),e(282,"class"),t(),e(283," "),n(284,"span",40),e(285,"AppModule"),t(),e(286," "),n(287,"span",18),e(288,"{"),t(),n(289,"span",18),e(290,"}"),t(),e(291,`
25`),t()(),c(),t()(),n(292,"nz-code-box",41),r(293,"nz-demo-experimental-image-auto-srcset",24),n(294,"div",25),E(),n(295,"p"),e(296,"\u4F7F\u7528 "),n(297,"code"),e(298,"nzAutoSrcset"),t(),e(299," \u65F6\u8981\u6C42\u5FC5\u987B\u5B9A\u4E49\u56FE\u7247\u5C3A\u5BF8("),n(300,"code"),e(301,"nzWidth"),t(),e(302,"\u3001"),n(303,"code"),e(304,"nzHeight"),t(),e(305,")\uFF0C\u914D\u5408 Loader \u4E3A\u4E0D\u540C\u7684\u50CF\u7D20\u5BC6\u5EA6\u81EA\u52A8\u751F\u6210 "),n(306,"a",42),e(307,"srcset"),t(),e(308,"\u3002"),t(),c(),t()()()(),n(309,"section",43),E(),n(310,"h2",44)(311,"span"),e(312,"API"),t(),n(313,"a",45),e(314,"#"),t()(),n(315,"h3",46)(316,"span"),e(317,"nz-image"),t(),n(318,"label",47),e(319,"component"),t(),n(320,"a",48),e(321,"#"),t()(),n(322,"table")(323,"thead")(324,"tr")(325,"th"),e(326,"\u53C2\u6570"),t(),n(327,"th"),e(328,"\u8BF4\u660E"),t(),n(329,"th"),e(330,"\u7C7B\u578B"),t(),n(331,"th"),e(332,"\u9ED8\u8BA4\u503C"),t(),n(333,"th"),e(334,"\u652F\u6301\u5168\u5C40\u914D\u7F6E"),t()()(),n(335,"tbody")(336,"tr")(337,"td"),e(338,"nzSrc"),t(),n(339,"td"),e(340,"url"),t(),n(341,"td")(342,"code"),e(343,"string"),t()(),n(344,"td"),e(345,"-"),t(),r(346,"td"),t(),n(347,"tr")(348,"td"),e(349,"nzAlt"),t(),n(350,"td"),e(351,"alt"),t(),n(352,"td")(353,"code"),e(354,"string"),t()(),n(355,"td"),e(356,"-"),t(),r(357,"td"),t(),n(358,"tr")(359,"td"),e(360,"nzWidth"),t(),n(361,"td"),e(362,"\u5BBD\u5EA6"),t(),n(363,"td")(364,"code"),e(365,"number|string"),t()(),n(366,"td")(367,"code"),e(368,"auto"),t()(),r(369,"td"),t(),n(370,"tr")(371,"td"),e(372,"nzHeight"),t(),n(373,"td"),e(374,"\u9AD8\u5EA6"),t(),n(375,"td")(376,"code"),e(377,"number|string"),t()(),n(378,"td")(379,"code"),e(380,"auto"),t()(),r(381,"td"),t(),n(382,"tr")(383,"td"),e(384,"nzAutoSrcset"),t(),n(385,"td"),e(386,"\u662F\u5426\u4F18\u5316\u56FE\u7247\u52A0\u8F7D"),t(),n(387,"td")(388,"code"),e(389,"boolean"),t()(),n(390,"td")(391,"code"),e(392,"false"),t()(),n(393,"td"),e(394,"\u2705"),t()(),n(395,"tr")(396,"td"),e(397,"nzSrcLoader"),t(),n(398,"td"),e(399,"\u52A0\u8F7D\u5668"),t(),n(400,"td")(401,"code"),e(402,"NzImageSrcLoader"),t()(),n(403,"td")(404,"code"),e(405,"defaultImageSrcLoader"),t()(),n(406,"td"),e(407,"\u2705"),t()(),n(408,"tr")(409,"td"),e(410,"nzPriority"),t(),n(411,"td"),e(412,"\u662F\u5426\u6DFB\u52A0 "),n(413,"a",26),e(414,"preload"),t()(),n(415,"td")(416,"code"),e(417,"boolean"),t()(),n(418,"td")(419,"code"),e(420,"false"),t()(),r(421,"td"),t()()(),n(422,"h3",49)(423,"span"),e(424,"NzImageSrcLoader"),t(),n(425,"a",50),e(426,"#"),t()(),n(427,"pre")(428,"code",16)(429,"span",17),e(430,"export"),t(),e(431," "),n(432,"span",17),e(433,"type"),t(),e(434," "),n(435,"span",40),e(436,"NzImageSrcLoader"),t(),e(437," "),n(438,"span",35),e(439,"="),t(),e(440," "),n(441,"span",18),e(442,"("),t(),e(443,"params"),n(444,"span",35),e(445,":"),t(),e(446," "),n(447,"span",18),e(448,"{"),t(),e(449," src"),n(450,"span",35),e(451,":"),t(),e(452," "),n(453,"span",51),e(454,"string"),t(),n(455,"span",18),e(456,";"),t(),e(457," width"),n(458,"span",35),e(459,":"),t(),e(460," "),n(461,"span",51),e(462,"number"),t(),e(463," "),n(464,"span",18),e(465,"}"),t(),n(466,"span",18),e(467,")"),t(),e(468," "),n(469,"span",35),e(470,"=>

25"),t(),e(471," "),n(472,"span",51),e(473,"string"),t(),n(474,"span",18),e(475,";"),t(),e(476,`
26`),t()(),n(477,"h2",52)(478,"span"),e(479,"\u6CE8\u610F"),t(),n(480,"a",53),e(481,"#"),t()(),n(482,"h3",54)(483,"span"),e(484,"nzSrcLoader"),t(),n(485,"a",55),e(486,"#"),t()(),n(487,"p"),e(488,"\u4F7F\u7528 "),n(489,"code"),e(490,"nzSrcLoader"),t(),e(491," \u53EF\u4EE5\u5E2E\u52A9\u4F60\u586B\u5145\u8BF7\u6C42\u56FE\u7247\u7684\u5173\u952E\u4FE1\u606F\uFF0C\u4F8B\u5982 "),n(492,"code"),e(493,"src"),t(),e(494," \u548C "),n(495,"code"),e(496,"srcset"),t(),e(497,"\uFF0C\u9ED8\u8BA4\u4E3A\uFF1A"),t(),n(498,"pre")(499,"code",16)(500,"span",17),e(501,"export"),t(),e(502," "),n(503,"span",17),e(504,"const"),t(),e(505," defaultImageSrcLoader"),n(506,"span",35),e(507,":"),t(),e(508," "),n(509,"span",56),e(510,"NzImageSrcLoader"),t(),e(511," "),n(512,"span",35),e(513,"="),t(),e(514," "),n(515,"span",18),e(516,"("),t(),n(517,"span",18),e(518,"{"),t(),e(519," src "),n(520,"span",18),e(521,"}"),t(),n(522,"span",18),e(523,")"),t(),e(524," "),n(525,"span",35),e(526,"=>"),t(),e(527," "),n(528,"span",18),e(529,"{"),t(),e(530,`
27  `),n(531,"span",17),e(532,"return"),t(),e(533," src"),n(534,"span",18),e(535,";"),t(),e(536,`
28`),n(537,"span",18),e(538,"}"),t(),n(539,"span",18),e(540,";"),t(),e(541,`
29`),t()(),n(542,"p"),e(543,"\u5185\u7F6E\u7684\u56FE\u7247 CND \u521B\u5EFA\u65B9\u6CD5"),t(),n(544,"pre")(545,"code",16),e(546,`
30`),n(547,"span",39),e(548,`/**
31 * AliObjectsLoader return format
32 * {domain}/{src}?x-oss-process=image/resize,w_{width}
33 */`),t(),e(549,`
34`),n(550,"span",17),e(551,"export"),t(),e(552," "),n(553,"span",17),e(554,"function"),t(),e(555," "),n(556,"span",38),e(557,"createAliObjectsLoader"),t(),n(558,"span",18),e(559,"("),t(),e(560,"domain"),n(561,"span",35),e(562,":"),t(),e(563," "),n(564,"span",51),e(565,"string"),t(),n(566,"span",18),e(567,")"),t(),n(568,"span",35),e(569,":"),t(),e(570," NzImageSrcLoader"),n(571,"span",18),e(572,";"),t(),e(573,`
35
36`),n(574,"span",39),e(575,`/**
37 * ImgixLoader return format
38 * {domain}/{src}?format=auto&fit=max&w={width}
39 */`),t(),e(576,`
40`),n(577,"span",17),e(578,"export"),t(),e(579," "),n(580,"span",17),e(581,"function"),t(),e(582," "),n(583,"span",38),e(584,"createImgixLoader"),t(),n(585,"span",18),e(586,"("),t(),e(587,"domain"),n(588,"span",35),e(589,":"),t(),e(590," "),n(591,"span",51),e(592,"string"),t(),n(593,"span",18),e(594,")"),t(),n(595,"span",35),e(596,":"),t(),e(597," NzImageSrcLoader"),n(598,"span",18),e(599,";"),t(),e(600,`
41
42`),n(601,"span",39),e(602,`/**
43 * CloudinaryLoader return format
44 * {domain}/c_limit,q_auto,w_{width}/{src}
45 */`),t(),e(603,`
46`),n(604,"span",17),e(605,"export"),t(),e(606," "),n(607,"span",17),e(608,"function"),t(),e(609," "),n(610,"span",38),e(611,"createCloudinaryLoader"),t(),n(612,"span",18),e(613,"("),t(),e(614,"domain"),n(615,"span",35),e(616,":"),t(),e(617," "),n(618,"span",51),e(619,"string"),t(),n(620,"span",18),e(621,")"),t(),n(622,"span",35),e(623,":"),t(),e(624," NzImageSrcLoader"),n(625,"span",18),e(626,";"),t(),e(627,`
47`),t()(),n(628,"h3",57)(629,"span"),e(630,"\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u9884\u52A0\u8F7D\u56FE\u7247"),t(),n(631,"a",58),e(632,"#"),t()(),n(633,"p"),e(634,"\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"),t(),n(635,"ul")(636,"li")(637,"a",27),e(638,"preloading responsive images"),t()(),n(639,"li")(640,"a",59),e(641,"next.js image component and image optimization"),t()()(),c(),t()()),a&2&&(u(),s("nzOffsetTop",16),u(),s("nzAffix",!1),u(70),s("nzGutter",8),u(),s("nzSpan",24),u(),s("nzId","components-experimental-image-demo-preloading")("nzLink","components-experimental-image-demo-preloading")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/preloading.md"),u(51),s("nzId","components-experimental-image-demo-src-loader")("nzLink","components-experimental-image-demo-src-loader")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/src-loader.md"),u(167),s("nzId","components-experimental-image-demo-auto-srcset")("nzLink","components-experimental-image-demo-auto-srcset")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/auto-srcset.md"))},dependencies:[U,f,j,G,W,O,R,T,M,w,k,L],encapsulation:2})};var Q=class m{expanded=!1;codeBoxes;goLink(o){window&&(window.location.hash=o)}

47expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(o=>o.expandCode(this.expanded))}static \u0275fac=function(a){return new(a||m)};static \u0275cmp=S({type:m,selectors:[["nz-demo-experimental-image"]],viewQuery:function(a,d){if(a&1&&b(f,5),a&2){let x;I(x=D())&&(d.codeBoxes=x)}},decls:651,vars:19,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"],["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"],["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","nzIframe","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"],[1,"token","punctuation","attr-equals"],["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","nzIframe","nzIframeHeight","nzHref"],["href","https://web.dev/cls/","target","_blank","rel","noopener"],[1,"token","operator"],[1,"token","function"],[1,"token","decorator"],[1,"token","at","operator"],[1,"token","comment"],[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","nzIframe","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"],[1,"token","builtin"],["id","note"],["onclick","window.location.hash = 'note'",1,"anchor"],["id","nzsrcloader"],["onclick","window.location.hash = 'nzsrcloader'",1,"anchor"],[1,"token","function-variable","function"],["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,d){a&1&&(n(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),C("nzClick",function(h){return d.goLink(h)}),r(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5),t()(),n(7,"section",6)(8,"h1"),e(9,"Image"),r(10,"span",7)(11,"span",8),n(12,"a",9),r(13,"nz-icon",10),t()(),n(14,"section",6),E(),n(15,"blockquote",11)(16,"p"),e(17,"NG-ZORRO experiments are features that are released but not yet considered stable or production ready"),t(),n(18,"p"),e(19,"Developers and users can opt-in into these features before they are fully released. But "),n(20,"strong"),e(21,"breaking changes"),t(),e(22," may occur with any release."),t()(),n(23,"h2",12)(24,"span"),e(25,"When To Use"),t(),n(26,"a",13),e(27,"#"),t()(),n(28,"ul")(29,"li"),e(30,"When you need the browser to prioritize image loading (needs to be handled in SSR)."),t(),n(31,"li"),e(32,"When you need to optimize for HD displays (e.g. retina screens)."),t(),n(33,"li"),e(34,"When using image CDN."),t(),n(35,"li"),e(36,"More in "),n(37,"a",14),e(38,"Image documentation"),t()(),n(39,"li"),e(40,"Next steps"),n(41,"ul")(42,"li"),e(43,"Add "),n(44,"a",15),e(45,"sizes"),t(),e(46," attribute and responsive support."),t()()()(),n(47,"pre")(48,"code",16)(49,"span",17),e(50,"import"),t(),e(51," "),n(52,"span",18),e(53,"{"),t(),e(54," NzImageModule "),n(55,"span",18),e(56,"}"),t(),e(57," "),n(58,"span",17),e(59,"from"),t(),e(60," "),n(61,"span",19),e(62,"'ng-zorro-antd/experimental/image'"),t(),n(63,"span",18),e(64,";"),t(),e(65,`
48`),t()(),c(),t(),n(66,"h2")(67,"span"),e(68,"Examples"),t(),n(69,"nz-icon",20),C("click",function(){return d.expandAllCode()}),t()()(),n(70,"div",21)(71,"div",22)(72,"nz-code-box",23),r(73,"nz-demo-experimental-image-preloading",24),n(74,"div",25),E(),n(75,"p"),e(76,"Setting "),n(77,"code"),e(78,"nzPriority"),t(),e(79," will add the "),n(80,"code"),e(81,'<link rel="preload">'),t(),e(82," tag when rendering server-side (SSR), and browsers will treat it as a high priority resource to load. You can see this in "),n(83,"a",26),e(84,"MDN - Preloading"),t(),e(85,", "),n(86,"a",27),e(87,"web.dev - Preloading responsive images"),t(),e(88," to learn more."),t(),n(89,"p"),e(90,"Note: usually we only need to set "),n(91,"code"),e(92,"nzPriority"),t(),e(93," for the first screen images, so you only need to add it for the first few items in the cyclically generated template, e.g."),t(),n(94,"pre")(95,"code",28),e(96,`@for (product of products; track product)
49  `),n(97,"span",29)(98,"span",29)(99,"span",18),e(100,"<"),t(),e(101,"nz-image"),t(),e(102," "),n(103,"span",30),e(104,"[nzPriority]"),t(),n(105,"span",31)(106,"span",32),e(107,"="),t(),n(108,"span",18),e(109,'"'),t(),e(110,"$index <= 8"),n(111,"span",18),e(112,'"'),t()(),n(113,"span",18),e(114,">"),t()(),n(115,"span",29)(116,"span",29)(117,"span",18),e(118,"</"),t(),e(119,"nz-image"),t(),n(120,"span",18),e(121,">"),t()(),e(122,`
50}
51`),t()(),c(),t()(),n(123,"nz-code-box",33),r(124,"nz-demo-experimental-image-src-loader",24),n(125,"div",25),E(),n(126,"p"),e(127,"Custom "),n(128,"code"),e(129,"nzSrcLoader"),t(),e(130," is used to resolve image URLs, or you can also use the built-in image CND provider's Loaders. "),r(131,"br"),e(132,`
52We recommend always specifying the image size (`),n(133,"code"),e(134,"nzWidth"),t(),e(135,", "),n(136,"code"),e(137,"nzHeight"),t(),e(138,"), which can help improve the key metrics of the web experience "),n(139,"a",34),e(140,"CLS"),t(),e(141,", and can also be used with the Loader to optimize the images using the image CND to improve the loading speed. "),r(142,"br"),e(143,`
53If you want to use a different Loader in a different environment you can do the following.`),t(),n(144,"pre")(145,"code",16)(146,"span",17),e(147,"import"),t(),e(148," "),n(149,"span",18),e(150,"{"),t(),e(151," environment "),n(152,"span",18),e(153,"}

53"),t(),e(154," "),n(155,"span",17),e(156,"from"),t(),e(157," "),n(158,"span",19),e(159,"'environments/environment'"),t(),n(160,"span",18),e(161,";"),t(),e(162,`
54
55`),n(163,"span",17),e(164,"import"),t(),e(165," "),n(166,"span",18),e(167,"{"),t(),e(168," NzConfig"),n(169,"span",18),e(170,","),t(),e(171," provideNzConfig "),n(172,"span",18),e(173,"}"),t(),e(174," "),n(175,"span",17),e(176,"from"),t(),e(177," "),n(178,"span",19),e(179,"'ng-zorro-antd/core/config'"),t(),n(180,"span",18),e(181,";"),t(),e(182,`
56`),n(183,"span",17),e(184,"import"),t(),e(185," "),n(186,"span",18),e(187,"{"),t(),e(188," createAliObjectsLoader"),n(189,"span",18),e(190,","),t(),e(191," defaultImageSrcLoader "),n(192,"span",18),e(193,"}"),t(),e(194," "),n(195,"span",17),e(196,"from"),t(),e(197," "),n(198,"span",19),e(199,"'ng-zorro-antd/experimental/image'"),t(),n(200,"span",18),e(201,";"),t(),e(202,`
57
58`),n(203,"span",17),e(204,"const"),t(),e(205," nzConfig"),n(206,"span",35),e(207,":"),t(),e(208," NzConfig "),n(209,"span",35),e(210,"="),t(),e(211," "),n(212,"span",18),e(213,"{"),t(),e(214,`
59  imageExperimental`),n(215,"span",35),e(216,":"),t(),e(217," "),n(218,"span",18),e(219,"{"),t(),e(220,`
60    nzSrcLoader`),n(221,"span",35),e(222,":"),t(),e(223," environment"),n(224,"span",18),e(225,"."),t(),e(226,"production "),n(227,"span",35),e(228,"?"),t(),e(229," "),n(230,"span",36),e(231,"createAliObjectsLoader"),t(),n(232,"span",18),e(233,"("),t(),n(234,"span",19),e(235,"'https://zos.alipayobjects.com/rmsportal'"),t(),n(236,"span",18),e(237,")"),t(),e(238," "),n(239,"span",35),e(240,":"),t(),e(241,` defaultImageSrcLoader
61  `),n(242,"span",18),e(243,"}"),t(),e(244,`
62`),n(245,"span",18),e(246,"}"),t(),n(247,"span",18),e(248,";"),t(),e(249,`
63
64`),n(250,"span",37)(251,"span",38),e(252,"@"),t(),n(253,"span",36),e(254,"NgModule"),t()(),n(255,"span",18),e(256,"("),t(),n(257,"span",18),e(258,"{"),t(),e(259,`
65  `),n(260,"span",39),e(261,"// ..."),t(),e(262,`
66  providers`),n(263,"span",35),e(264,":"),t(),e(265," "),n(266,"span",18),e(267,"["),t(),e(268,`
67    `),n(269,"span",36),e(270,"provideNzConfig"),t(),n(271,"span",18),e(272,"("),t(),e(273,"nzConfig"),n(274,"span",18),e(275,")"),t(),e(276,`
68  `),n(277,"span",18),e(278,"]"),t(),e(279,`
69`),n(280,"span",18),e(281,"}"),t(),n(282,"span",18),e(283,")"),t(),e(284,`
70`),n(285,"span",17),e(286,"export"),t(),e(287," "),n(288,"span",17),e(289,"class"),t(),e(290," "),n(291,"span",40),e(292,"AppModule"),t(),e(293," "),n(294,"span",18),e(295,"{"),t(),n(296,"span",18),e(297,"}"),t(),e(298,`
71`),t()(),c(),t()(),n(299,"nz-code-box",41),r(300,"nz-demo-experimental-image-auto-srcset",24),n(301,"div",25),E(),n(302,"p"),e(303,"Using "),n(304,"code"),e(305,"nzAutoSrcset"),t(),e(306," requires to specify the image size ("),n(307,"code"),e(308,"nzWidth"),t(),e(309,", "),n(310,"code"),e(311,"nzHeight"),t(),e(312,"), with the Loader automatically generating "),n(313,"a",42),e(314,"srcset"),t(),e(315," for different pixel densities."),t(),c(),t()()()(),n(316,"section",43),E(),n(317,"h2",44)(318,"span"),e(319,"API"),t(),n(320,"a",45),e(321,"#"),t()(),n(322,"h3",46)(323,"span"),e(324,"nz-image"),t(),n(325,"label",47),e(326,"component"),t(),n(327,"a",48),e(328,"#"),t()(),n(329,"table")(330,"thead")(331,"tr")(332,"th"),e(333,"Property"),t(),n(334,"th"),e(335,"Description"),t(),n(336,"th"),e(337,"Type"),t(),n(338,"th"),e(339,"Default"),t(),n(340,"th"),e(341,"Global Config"),t()()(),n(342,"tbody")(343,"tr")(344,"td"),e(345,"nzSrc"),t(),n(346,"td"),e(347,"URL"),t(),n(348,"td")(349,"code"),e(350,"string"),t()(),n(351,"td"),e(352,"-"),t(),r(353,"td"),t(),n(354,"tr")(355,"td"),e(356,"nzAlt"),t(),n(357,"td"),e(358,"Alt"),t(),n(359,"td")(360,"code"),e(361,"string"),t()(),n(362,"td"),e(363,"-"),t(),r(364,"td"),t(),n(365,"tr")(366,"td"),e(367,"nzWidth"),t(),n(368,"td"),e(369,"Width"),t(),n(370,"td")(371,"code"),e(372,"number|string"),t()(),n(373,"td")(374,"code"),e(375,"auto"),t()(),r(376,"td"),t(),n(377,"tr")(378,"td"),e(379,"nzHeight"),t(),n(380,"td"),e(381,"Height"),t(),n(382,"td")(383,"code"),e(384,"number|string"),t()(),n(385,"td")(386,"code"),e(387,"auto"),t()(),r(388,"td"),t(),n(389,"tr")(390,"td"),e(391,"nzAutoSrcset"),t(),n(392,"td"),e(393,"Whether to optimize image loading"),t(),n(394,"td")(395,"code"),e(396,"boolean"),t()(),n(397,"td")(398,"code"),e(399,"false"),t()(),n(400,"td"),e(401,"\u2705"),t()(),n(402,"tr")(403,"td"),e(404,"nzSrcLoader"),t(),n(405,"td"),e(406,"Loader"),t(),n(407,"td")(408,"code"),e(409,"NzImageSrcLoader"),t()(),n(410,"td")(411,"code"),e(412,"defaultImageSrcLoader"),t()(),n(413,"td"),e(414,"\u2705"),t()(),n(415,"tr")(416,"td"),e(417,"nzPriority"),t(),n(418,"td"),e(419,"Whether to add "),n(420,"a",26),e(421,"preload"),t(),e(422," (only SSR)"),t(),n(423,"td")(424,"code"),e(425,"boolean"),t()(),n(426,"td")(427,"code"),e(428,"false"),t()(),n(429,"td"),e(430,"\u2705"),t()()()(),n(431,"h3",49)(432,"span"),e(433,"NzImageSrcLoader"),t(),n(434,"a",50),e(435,"#"),t()(),n(436,"pre")(437,"code",16)(438,"span",17),e(439,"export"),t(),e(440," "),n(441,"span",17),e(442,"type"),t(),e(443," "),n(444,"span",40),e(445,"NzImageSrcLoader"),t(),e(446," "),n(447,"span",35),e(448,"="),t(),e(449," "),n(450,"span",18),e(451,"("),t(),e(452,"params"),n(453,"span",35),e(454,":"),t(),e(455," "),n(456,"span",18),e(457,"{"),t(),e(458," src"),n(459,"span",35),e(460,":"),t(),e(461," "),n(462,"span",51),e(463,"string"),t(),n(464,"span",18),e(465,";"),t(),e(466," width"),n(467,"span",35),e(468,":"),t(),e(469," "),n(470,"span",51),e(471,"number"),t(),e(472," "),n(473,"span",18),e(474,"}"),t(),n(475,"span",18),e(476,")"),t(),e(477," "),n(478,"span",35),e(479,"=>"),t(),e(480," "),n(481,"span",51),e(482,"string"),t(),n(483,"span",18),e(484,";"),t(),e(485,`
72`),t()(),n(486,"h2",52)(487,"span"),e(488,"Note"),t(),n(489,"a",53),e(490,"#"),t()(),n(491,"h3",54)(492,"span"),e(493,"nzSrcLoader"),t(),n(494,"a",55),e(495,"#"),t()(),n(496,"p"),e(497,"Using "),n(498,"code"),e(499,"nzSrcLoader"),t(),e(500," helps you to fill in key information about the requested image, such as "),n(501,"code"),e(502,"src"),t(),e(503," and "),n(504,"code"),e(505,"width"),t(),e(506,", which defaults to"),t(),n(507,"pre")(508,"code",16)(509,"span",17),e(510,"exp

72ort"),t(),e(511," "),n(512,"span",17),e(513,"const"),t(),e(514," defaultImageSrcLoader"),n(515,"span",35),e(516,":"),t(),e(517," "),n(518,"span",56),e(519,"NzImageSrcLoader"),t(),e(520," "),n(521,"span",35),e(522,"="),t(),e(523," "),n(524,"span",18),e(525,"("),t(),n(526,"span",18),e(527,"{"),t(),e(528," src "),n(529,"span",18),e(530,"}"),t(),n(531,"span",18),e(532,")"),t(),e(533," "),n(534,"span",35),e(535,"=>"),t(),e(536," "),n(537,"span",18),e(538,"{"),t(),e(539,`
73  `),n(540,"span",17),e(541,"return"),t(),e(542," src"),n(543,"span",18),e(544,";"),t(),e(545,`
74`),n(546,"span",18),e(547,"}"),t(),n(548,"span",18),e(549,";"),t(),e(550,`
75`),t()(),n(551,"p"),e(552,"Built-in image CND creation method"),t(),n(553,"pre")(554,"code",16),e(555,`
76`),n(556,"span",39),e(557,`/**
77 * AliObjectsLoader return format
78 * {domain}/{src}?x-oss-process=image/resize,w_{width}
79 */`),t(),e(558,`
80`),n(559,"span",17),e(560,"export"),t(),e(561," "),n(562,"span",17),e(563,"function"),t(),e(564," "),n(565,"span",36),e(566,"createAliObjectsLoader"),t(),n(567,"span",18),e(568,"("),t(),e(569,"domain"),n(570,"span",35),e(571,":"),t(),e(572," "),n(573,"span",51),e(574,"string"),t(),n(575,"span",18),e(576,")"),t(),n(577,"span",35),e(578,":"),t(),e(579," NzImageSrcLoader"),n(580,"span",18),e(581,";"),t(),e(582,`
81
82`),n(583,"span",39),e(584,`/**
83 * ImgixLoader return format
84 * {domain}/{src}?format=auto&fit=max&w={width}
85 */`),t(),e(585,`
86`),n(586,"span",17),e(587,"export"),t(),e(588," "),n(589,"span",17),e(590,"function"),t(),e(591," "),n(592,"span",36),e(593,"createImgixLoader"),t(),n(594,"span",18),e(595,"("),t(),e(596,"domain"),n(597,"span",35),e(598,":"),t(),e(599," "),n(600,"span",51),e(601,"string"),t(),n(602,"span",18),e(603,")"),t(),n(604,"span",35),e(605,":"),t(),e(606," NzImageSrcLoader"),n(607,"span",18),e(608,";"),t(),e(609,`
87
88`),n(610,"span",39),e(611,`/**
89 * CloudinaryLoader return format
90 * {domain}/c_limit,q_auto,w_{width}/{src}
91 */`),t(),e(612,`
92`),n(613,"span",17),e(614,"export"),t(),e(615," "),n(616,"span",17),e(617,"function"),t(),e(618," "),n(619,"span",36),e(620,"createCloudinaryLoader"),t(),n(621,"span",18),e(622,"("),t(),e(623,"domain"),n(624,"span",35),e(625,":"),t(),e(626," "),n(627,"span",51),e(628,"string"),t(),n(629,"span",18),e(630,")"),t(),n(631,"span",35),e(632,":"),t(),e(633," NzImageSrcLoader"),n(634,"span",18),e(635,";"),t(),e(636,`
93`),t()(),n(637,"h3",57)(638,"span"),e(639,"Responsive images and preloaded images"),t(),n(640,"a",58),e(641,"#"),t()(),n(642,"p"),e(643,"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."),t(),n(644,"ul")(645,"li")(646,"a",27),e(647,"preloading responsive images"),t()(),n(648,"li")(649,"a",59),e(650,"next.js image component and image optimization"),t()()(),c(),t()()),a&2&&(u(),s("nzOffsetTop",16),u(),s("nzAffix",!1),u(68),s("nzGutter",8),u(),s("nzSpan",24),u(),s("nzId","components-experimental-image-demo-preloading")("nzLink","components-experimental-image-demo-preloading")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/preloading.md"),u(51),s("nzId","components-experimental-image-demo-src-loader")("nzLink","components-experimental-image-demo-src-loader")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/src-loader.md"),u(176),s("nzId","components-experimental-image-demo-auto-srcset")("nzLink","components-experimental-image-demo-auto-srcset")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/experimental-image/demo/auto-srcset.md"))},dependencies:[U,f,j,G,W,O,R,T,M,w,k,L],encapsulation:2})};var we=[{path:"en",component:Q},{path:"zh",component:V}],St=we;export{St as default};