https://preview-9123-ng-zorro-antd.surge.sh/chunk-6KYQOOVX.js

1import{c as ge,d as v}from"./chunk-YBDXZPBM.js";import{a as f,g as j,h as G,m as U,n as Z}from"./chunk-2UO6NPYH.js";import"./chunk-3TLZ5TMP.js";import"./chunk-JKD4VGRU.js";import{D as H,Dd as O,Ed as M,Hd as W,Na as Se,Oa as A,T as Ee,_a as T,mc as ze,zc as R}from"./chunk-BS5JWHVW.js";import{Ac as D,Bc as I,Gc as e,Ib as S,Jb as pe,Ub as xe,Vb as s,aa as de,f as oe,hc as n,hd as ce,ia as se,ic as t,jc as r,l as F,ld as P,m as g,qc as C,rb as p,wa as ue,xa as c,xb as B,ya as E,zc as b}from"./chunk-NACBYLXS.js";import"./chunk-EQDQRRRY.js";var Ce=["imageRef"];function fe(m){return typeof m=="number"||/^(\d)+(px)?$/.test(m)}function be(m){return m[0]==="/"?m.slice(1):m}var he=({src:m})=>m;function $(m){return({src:o,width:a})=>{let d=Ee(a)?"":`?x-oss-process=image/resize,w_${a}`;return`${m}/${be(o)}${d}`}}var Fe="imageExperimental",De=[16,32,48,64,96,128,256,384,640,750,828,1080,1200,1920,2048,3840],N=(()=>{let m,o=[],a=[],d,x=[],h=[],X,ee=[],te=[],ne,ie=[],ae=[],re,me=[],le=[];return class Y{static{let u=typeof Symbol=="function"&&Symbol.metadata?Object.create(null):void 0;m=[A()],d=[A()],X=[A()],ne=[A()],re=[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:u},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:u},x,h),F(null,null,X,{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:u},ee,te),F(null,null,ne,{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:u},ie,ae),F(null,null,re,{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:u},me,le),u&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:u})}cdr;nzConfigService;imagePreloadService;_nzModuleName=Fe;nzSrc="";nzAlt="";nzWidth="auto";nzHeight="auto";nzSrcLoader=g(this,o,he);nzAutoSrcset=(g(this,a),g(this,x,!1));nzPriority=(g(this,h),!1);nzFallback=g(this,ee,null);nzPlaceholder=(g(this,te),g(this,ie,null));nzDisablePreview=(g(this,ae),g(this,me,!1));imageRef=g(this,le);src="";width="auto";height="auto";srcset="";internalImage;destroy$=new oe;reloadDisposeHandler=()=>{};constructor(u,i,l){this.cdr=u,this.nzConfigService=i,this.imagePreloadService=l,this.nzConfigService.getConfigChangeEventForComponent(Fe).pipe(de(this.destroy$)).subscribe(()=>{this.composeImageAttrs(),this.cdr.markForCheck()})}ngOnInit(){this.nzPriority&&this.preload()}ngOnChanges(u){let{nzLoader:i,nzSrc:l,nzOptimize:z}=u;(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?!fe(this.nzWidth)||!fe(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 u=this.getLoader();if(!this.optimizable()){this.src=u({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,De);this.src=u({src:this.nzSrc,width:i[0]}),this.srcset=i.map((l,z)=>`${u({src:this.nzSrc,width:l})} ${z+1}x`).join(", ")}getLoader(){return this.nzSrcLoader||he}convertWidths(u,i){let l=[...i].sort((z,J)=>z-J);return[...new Set([u,u*2].map(z=>l.find(J=>J>=z)||z))]}static \u0275fac=function(i){return new(i||Y)(B(ce),B(Se),B(ze))};static \u0275cmp=S({type:Y,selectors:[["nz-image"]],viewQuery:function(i,l){if(i&1&&b(Ce,5),i&2){let z;D(z=I())&&(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:[ue],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),xe("width",l.width)("height",l.height)("srcset",l.srcset)("alt",l.nzAlt||null))},dependencies:[ge],encapsulation:2,changeDetection:0})}})(),y=(()=>{class m{static \u0275fac=function(d){return new(d||m)};static \u0275mod=pe({type:m});static \u0275inj=se({})}return m})();var w=class m{src="jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";loader=$("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=$("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 Q=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;D(x=I())&&(d.codeBoxes=x)}},decls:616,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"],["name","experimental-image","description","\u5B9E\u9A8C\u6027\u7684\u56FE\u7247\u7EC4\u4EF6\u3002","language","zh"],[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"],["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","punctuation"],[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,"language-ts"],[1,"token","keyword"],[1,"token","string"],[1,"token","operator"],[1,"token","function"],["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","class-name"],[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"],[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,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()(),r(15,"component-meta",11),n(16,"blockquote",12)(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,"section",6),E(),n(25,"h2",13)(26,"span"),e(27,"\u4F55\u65F6\u4F7F\u7528"),t(),n(28,"a",14),e(29,"#"),t()(),n(30,"ul")(31,"li"),e(32,"\u9700\u8981\u6D4F\u89C8\u5668\u4F18\u5148\u52A0\u8F7D\u56FE\u7247\u65F6\uFF08\u9700\u8981\u5728 SSR \u4E0B\u5904\u7406\uFF09\u3002"),t(),n(33,"li"),e(34,"\u9700\u8981\u5BF9\u9AD8\u6E05\u663E\u793A\u5668\uFF08\u5982\u89C6\u7F51\u819C\u5C4F\uFF09\u4F18\u5316\u65F6\u3002"),t(),n(35,"li"),e(36,"\u4F7F\u7528\u56FE\u7247 CDN \u670D\u52A1\u65F6\u3002"),t(),n(37,"li"),e(38,"\u4EE5\u53CA "),n(39,"a",15),e(40,"Image documentation"),t(),e(41," \u4E2D\u7684\u529F\u80FD"),t(),n(42,"li"),e(43,"\u4E0B\u4E00\u6B65\u8BA1\u5212"),n(44,"ul")(45,"li"),e(46,"\u6DFB\u52A0 "),n(47,"a",16),e(48,"sizes"),t(),e(49," \u5C5E\u6027\u53CA\u54CD\u5E94\u5F0F\u7684\u652F\u6301"),t()()()(),c(),t(),n(50,"h2")(51,"span"),e(52,"\u4EE3\u7801\u6F14\u793A"),t(),n(53,"nz-icon",17),C("click",function(){return d.expandAllCode()}),t()()(),n(54,"div",18)(55,"div",19)(56,"nz-code-box",20),r(57,"nz-demo-experimental-image-preloading",21),n(58,"div",22),E(),n(59,"p"),e(60,"\u8BBE\u7F6E "),n(61,"code"),e(62,"nzPriority"),t(),e(63," \u5C06\u4F1A\u5728\u670D\u52A1\u7AEF\u6E32\u67D3(SSR) \u65F6\u6DFB\u52A0 "),n(64,"code"),e(65,'<link rel="preload">'),t(),e(66," \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(67,"a",23),e(68,"MDN - Preloading"),t(),e(69,"\u3001"),n(70,"a",24),e(71,"web.dev - Preloading responsive images"),t(),e(72," \u4E86\u89E3\u66F4\u591A\u3002"),t(),n(73,"p"),e(74,"\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C\u901A\u5E38\u53EA\u9700\u8981\u4E3A\u9996\u5C4F\u56FE\u7247\u8BBE\u7F6E "),n(75,"code"),e(76,"nzPriority"),t(),e(77," \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(78,"pre")(79,"code",25),e(80,`@for (product of products; track product)
2  `),n(81,"span",26)(82,"span",26)(83,"span",27),e(84,"<"),t(),e(85,"nz-image"),t(),e(86," "),n(87,"span",28),e(88,"[nzPriority]"),t(),n(89,"span",29)(90,"span",30),e(91,"="),t(),n(92,"span",27),e(93,'"'),t(),e(94,"$index <= 8"),n(95,"span",27),e(96,'"'),t()(),n(97,"span",27),e(98,">"),t()(),n(99,"span",26)(100,"span",26)(101,"span",27),e(102,"</"),t(),e(103,"nz-image"),t(),n(104,"span",27),e(105,">"),t()(),e(106,`
3}
4`),t()(),c(),t()(),n(107,"nz-code-box",31),r(108,"nz-demo-experimental-image-src-loader",21),n(109,"div",22),E(),n(110,"p"),e(111,"\u81EA\u5B9A\u4E49 "),n(112,"code"),e(113,"nzSrcLoader"),t(),e(114," \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(115,"br"),e(116,`
5\u6211\u4EEC\u5EFA\u8BAE\u59CB\u7EC8\u6307\u5B9A\u56FE\u7247\u7684\u5C3A\u5BF8(`),n(117,"code"),e(118,"nzWidth"),t(),e(119,"\u3001"),n(120,"code"),e(121,"nzHeight"),t(),e(122,")\uFF0C\u4E0D\u4EC5\u53EF\u4EE5\u5E2E\u52A9\u63D0\u9AD8\u7F51\u9875\u4F53\u9A8C\u7684\u5173\u952E\u6307\u6807 "),n(123,"a",32),e(124,"CLS"),t(),e(125,"\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(126,"br"),e(127,`
6\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(128,"pre")(129,"code",33)(130,"span",34),e(131,"import"),t(),e(132," "),n(133,"span",27),e(134,"{"),t(),e(135," environment "),n(136,"span",27),e(137,"}"),t(),e(138," "),n(139,"span",34),e(140,"from"),t(),e(141," "),n(142,"span",35),e(143,"'environments/environment'"),t(),n(144,"span",27),e(145,";"),t(),e(146,`
7

8`),n(147,"span",34),e(148,"import"),t(),e(149," "),n(150,"span",27),e(151,"{"),t(),e(152," NzConfig"),n(153,"span",27),e(154,","),t(),e(155," provideNzConfig "),n(156,"span",27),e(157,"}"),t(),e(158," "),n(159,"span",34),e(160,"from"),t(),e(161," "),n(162,"span",35),e(163,"'ng-zorro-antd/core/config'"),t(),n(164,"span",27),e(165,";"),t(),e(166,`
9`),n(167,"span",34),e(168,"import"),t(),e(169," "),n(170,"span",27),e(171,"{"),t(),e(172," aliObjectsLoader"),n(173,"span",27),e(174,","),t(),e(175," defaultImageSrcLoader "),n(176,"span",27),e(177,"}"),t(),e(178," "),n(179,"span",34),e(180,"from"),t(),e(181," "),n(182,"span",35),e(183,"'ng-zorro-antd/experimental/image'"),t(),n(184,"span",27),e(185,";"),t(),e(186,`
10
11`),n(187,"span",34),e(188,"const"),t(),e(189," nzConfig"),n(190,"span",36),e(191,":"),t(),e(192," NzConfig "),n(193,"span",36),e(194,"="),t(),e(195," "),n(196,"span",27),e(197,"{"),t(),e(198,`
12  imageExperimental`),n(199,"span",36),e(200,":"),t(),e(201," "),n(202,"span",27),e(203,"{"),t(),e(204,`
13    nzSrcLoader`),n(205,"span",36),e(206,":"),t(),e(207," environment"),n(208,"span",27),e(209,"."),t(),e(210,"production "),n(211,"span",36),e(212,"?"),t(),e(213," aliObjectsLoader "),n(214,"span",36),e(215,":"),t(),e(216,` defaultImageSrcLoader
14  `),n(217,"span",27),e(218,"}"),t(),e(219,`
15`),n(220,"span",27),e(221,"}"),t(),n(222,"span",27),e(223,";"),t(),e(224,`
16
17`),n(225,"span",34),e(226,"export"),t(),e(227," "),n(228,"span",34),e(229,"const"),t(),e(230," appConfig"),n(231,"span",36),e(232,":"),t(),e(233," ApplicationConfig "),n(234,"span",36),e(235,"="),t(),e(236," "),n(237,"span",27),e(238,"{"),t(),e(239,`
18  providers`),n(240,"span",36),e(241,":"),t(),e(242," "),n(243,"span",27),e(244,"["),t(),e(245,`
19    `),n(246,"span",37),e(247,"provideNzConfig"),t(),n(248,"span",27),e(249,"("),t(),e(250,"nzConfig"),n(251,"span",27),e(252,")"),t(),e(253,`
20  `),n(254,"span",27),e(255,"]"),t(),e(256,`
21`),n(257,"span",27),e(258,"}"),t(),e(259,`
22`),t()(),c(),t()(),n(260,"nz-code-box",38),r(261,"nz-demo-experimental-image-auto-srcset",21),n(262,"div",22),E(),n(263,"p"),e(264,"\u4F7F\u7528 "),n(265,"code"),e(266,"nzAutoSrcset"),t(),e(267," \u65F6\u8981\u6C42\u5FC5\u987B\u5B9A\u4E49\u56FE\u7247\u5C3A\u5BF8("),n(268,"code"),e(269,"nzWidth"),t(),e(270,"\u3001"),n(271,"code"),e(272,"nzHeight"),t(),e(273,")\uFF0C\u914D\u5408 Loader \u4E3A\u4E0D\u540C\u7684\u50CF\u7D20\u5BC6\u5EA6\u81EA\u52A8\u751F\u6210 "),n(274,"a",39),e(275,"srcset"),t(),e(276,"\u3002"),t(),c(),t()()()(),n(277,"section",40),E(),n(278,"h2",41)(279,"span"),e(280,"API"),t(),n(281,"a",42),e(282,"#"),t()(),n(283,"h3",43)(284,"span"),e(285,"nz-image"),t(),n(286,"label",44),e(287,"component"),t(),n(288,"a",45),e(289,"#"),t()(),n(290,"table")(291,"thead")(292,"tr")(293,"th"),e(294,"\u53C2\u6570"),t(),n(295,"th"),e(296,"\u8BF4\u660E"),t(),n(297,"th"),e(298,"\u7C7B\u578B"),t(),n(299,"th"),e(300,"\u9ED8\u8BA4\u503C"),t(),n(301,"th"),e(302,"\u652F\u6301\u5168\u5C40\u914D\u7F6E"),t()()(),n(303,"tbody")(304,"tr")(305,"td")(306,"code"),e(307,"nzSrc"),t()(),n(308,"td"),e(309,"url"),t(),n(310,"td")(311,"code"),e(312,"string"),t()(),n(313,"td"),e(314,"-"),t(),r(315,"td"),t(),n(316,"tr")(317,"td")(318,"code"),e(319,"nzAlt"),t()(),n(320,"td"),e(321,"alt"),t(),n(322,"td")(323,"code"),e(324,"string"),t()(),n(325,"td"),e(326,"-"),t(),r(327,"td"),t(),n(328,"tr")(329,"td")(330,"code"),e(331,"nzWidth"),t()(),n(332,"td"),e(333,"\u5BBD\u5EA6"),t(),n(334,"td")(335,"code"),e(336,"number|string"),t()(),n(337,"td")(338,"code"),e(339,"auto"),t()(),r(340,"td"),t(),n(341,"tr")(342,"td")(343,"code"),e(344,"nzHeight"),t()(),n(345,"td"),e(346,"\u9AD8\u5EA6"),t(),n(347,"td")(348,"code"),e(349,"number|string"),t()(),n(350,"td")(351,"code"),e(352,"auto"),t()(),r(353,"td"),t(),n(354,"tr")(355,"td")(356,"code"),e(357,"nzAutoSrcset"),t()(),n(358,"td"),e(359,"\u662F\u5426\u4F18\u5316\u56FE\u7247\u52A0\u8F7D"),t(),n(360,"td")(361,"code"),e(362,"boolean"),t()(),n(363,"td")(364,"code"),e(365,"false"),t()(),n(366,"td"),e(367,"\u2705"),t()(),n(368,"tr")(369,"td")(370,"code"),e(371,"nzSrcLoader"),t()(),n(372,"td"),e(373,"\u52A0\u8F7D\u5668"),t(),n(374,"td")(375,"code"),e(376,"NzImageSrcLoader"),t()(),n(377,"td")(378,"code"),e(379,"defaultImageSrcLoader"),t()(),n(38

220,"td"),e(381,"\u2705"),t()(),n(382,"tr")(383,"td")(384,"code"),e(385,"nzPriority"),t()(),n(386,"td"),e(387,"\u662F\u5426\u6DFB\u52A0 "),n(388,"a",23),e(389,"preload"),t()(),n(390,"td")(391,"code"),e(392,"boolean"),t()(),n(393,"td")(394,"code"),e(395,"false"),t()(),r(396,"td"),t()()(),n(397,"h3",46)(398,"span"),e(399,"NzImageSrcLoader"),t(),n(400,"a",47),e(401,"#"),t()(),n(402,"pre")(403,"code",33)(404,"span",34),e(405,"export"),t(),e(406," "),n(407,"span",34),e(408,"type"),t(),e(409," "),n(410,"span",48),e(411,"NzImageSrcLoader"),t(),e(412," "),n(413,"span",36),e(414,"="),t(),e(415," "),n(416,"span",27),e(417,"("),t(),e(418,"params"),n(419,"span",36),e(420,":"),t(),e(421," "),n(422,"span",27),e(423,"{"),t(),e(424," src"),n(425,"span",36),e(426,":"),t(),e(427," "),n(428,"span",49),e(429,"string"),t(),n(430,"span",27),e(431,";"),t(),e(432," width"),n(433,"span",36),e(434,":"),t(),e(435," "),n(436,"span",49),e(437,"number"),t(),e(438," "),n(439,"span",27),e(440,"}"),t(),n(441,"span",27),e(442,")"),t(),e(443," "),n(444,"span",36),e(445,"=>"),t(),e(446," "),n(447,"span",49),e(448,"string"),t(),n(449,"span",27),e(450,";"),t(),e(451,`
23`),t()(),n(452,"h2",50)(453,"span"),e(454,"\u6CE8\u610F"),t(),n(455,"a",51),e(456,"#"),t()(),n(457,"h3",52)(458,"span"),e(459,"nzSrcLoader"),t(),n(460,"a",53),e(461,"#"),t()(),n(462,"p"),e(463,"\u4F7F\u7528 "),n(464,"code"),e(465,"nzSrcLoader"),t(),e(466," \u53EF\u4EE5\u5E2E\u52A9\u4F60\u586B\u5145\u8BF7\u6C42\u56FE\u7247\u7684\u5173\u952E\u4FE1\u606F\uFF0C\u4F8B\u5982 "),n(467,"code"),e(468,"src"),t(),e(469," \u548C "),n(470,"code"),e(471,"srcset"),t(),e(472,"\uFF0C\u9ED8\u8BA4\u4E3A\uFF1A"),t(),n(473,"pre")(474,"code",33)(475,"span",34),e(476,"export"),t(),e(477," "),n(478,"span",34),e(479,"const"),t(),e(480," defaultImageSrcLoader"),n(481,"span",36),e(482,":"),t(),e(483," "),n(484,"span",54),e(485,"NzImageSrcLoader"),t(),e(486," "),n(487,"span",36),e(488,"="),t(),e(489," "),n(490,"span",27),e(491,"("),t(),n(492,"span",27),e(493,"{"),t(),e(494," src "),n(495,"span",27),e(496,"}"),t(),n(497,"span",27),e(498,")"),t(),e(499," "),n(500,"span",36),e(501,"=>"),t(),e(502," "),n(503,"span",27),e(504,"{"),t(),e(505,`
24  `),n(506,"span",34),e(507,"return"),t(),e(508," src"),n(509,"span",27),e(510,";"),t(),e(511,`
25`),n(512,"span",27),e(513,"}"),t(),n(514,"span",27),e(515,";"),t(),e(516,`
26`),t()(),n(517,"p"),e(518,"\u5185\u7F6E\u7684\u56FE\u7247 CND \u521B\u5EFA\u65B9\u6CD5"),t(),n(519,"pre")(520,"code",33)(521,"span",55),e(522,`/**
27 * AliObjectsLoader return format
28 * {domain}/{src}?x-oss-process=image/resize,w_{width}
29 */`),t(),e(523,`
30`),n(524,"span",34),e(525,"export"),t(),e(526," "),n(527,"span",34),e(528,"function"),t(),e(529," "),n(530,"span",37),e(531,"createAliObjectsLoader"),t(),n(532,"span",27),e(533,"("),t(),e(534,"domain"),n(535,"span",36),e(536,":"),t(),e(537," "),n(538,"span",49),e(539,"string"),t(),n(540,"span",27),e(541,")"),t(),n(542,"span",36),e(543,":"),t(),e(544," NzImageSrcLoader"),n(545,"span",27),e(546,";"),t(),e(547,`
31
32`),n(548,"span",55),e(549,`/**
33 * ImgixLoader return format
34 * {domain}/{src}?format=auto&fit=max&w={width}
35 */`),t(),e(550,`
36`),n(551,"span",34),e(552,"export"),t(),e(553," "),n(554,"span",34),e(555,"function"),t(),e(556," "),n(557,"span",37),e(558,"createImgixLoader"),t(),n(559,"span",27),e(560,"("),t(),e(561,"domain"),n(562,"span",36),e(563,":"),t(),e(564," "),n(565,"span",49),e(566,"string"),t(),n(567,"span",27),e(568,")"),t(),n(569,"span",36),e(570,":"),t(),e(571," NzImageSrcLoader"),n(572,"span",27),e(573,";"),t(),e(574,`
37
38`),n(575,"span",55),e(576,`/**
39 * CloudinaryLoader return format
40 * {domain}/c_limit,q_auto,w_{width}/{src}
41 */`),t(),e(577,`
42`),n(578,"span",34),e(579,"export"),t(),e(580," "),n(581,"span",34),e(582,"function"),t(),e(583," "),n(584,"span",37),e(585,"createCloudinaryLoader"),t(),n(586,"span",27),e(587,"("),t(),e(588,"domain"),n(589,"span",36),e(590,":"),t(),e(591," "),n(592,"span",49),e(593,"string"),t(),n(594,"span",27),e(595,")"),t(),n(596,"span",36),e(597,":"),t(),e(598," NzImageSrcLoader"),n(599,"span",27),e(600,";"),t(),e(601,`
43`),t()(),n(602,"h3",56)(603,"span"),e(604,"\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u9884\u52A0\u8F7D\u56FE\u7247"),t(),n(605,"a",57),e(606,"#"),t()(),n(607,"p"),e(608,"\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(609,"ul")(610,"li")(611,"a",24),e(612,"preloading responsive images"),t()(),n(613,"li")(614,"a",58),e(615,"next.js image component and image optimization"),t()()(),c(),t()()),a&2&&(p(),s("nzOffsetTop",16),p(),s("nzAffix",!1),p(52),s("nzGutter",8),p(),s("nzSpan",24),p(),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"),p(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"),p(153),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:[Z,f,U,j,G,W,M,O,R,T,w,k,L],encapsulation:2})};var q=class m{expanded=!1;codeBoxes;goLink(o){window&&(window.location.hash=o)}

43expandAllCode(){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;D(x=I())&&(d.codeBoxes=x)}},decls:625,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"],["name","experimental-image","description","Experimental image component.","language","en"],[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"],["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","punctuation"],[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,"language-ts"],[1,"token","keyword"],[1,"token","string"],[1,"token","operator"],[1,"token","function"],["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","class-name"],[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"],[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,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()(),r(14,"component-meta",11),n(15,"blockquote",12)(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,"section",6),E(),n(24,"h2",13)(25,"span"),e(26,"When To Use"),t(),n(27,"a",14),e(28,"#"),t()(),n(29,"ul")(30,"li"),e(31,"When you need the browser to prioritize image loading (needs to be handled in SSR)."),t(),n(32,"li"),e(33,"When you need to optimize for HD displays (e.g. retina screens)."),t(),n(34,"li"),e(35,"When using image CDN."),t(),n(36,"li"),e(37,"More in "),n(38,"a",15),e(39,"Image documentation"),t()(),n(40,"li"),e(41,"Next steps"),n(42,"ul")(43,"li"),e(44,"Add "),n(45,"a",16),e(46,"sizes"),t(),e(47," attribute and responsive support."),t()()()(),c(),t(),n(48,"h2")(49,"span"),e(50,"Examples"),t(),n(51,"nz-icon",17),C("click",function(){return d.expandAllCode()}),t()()(),n(52,"div",18)(53,"div",19)(54,"nz-code-box",20),r(55,"nz-demo-experimental-image-preloading",21),n(56,"div",22),E(),n(57,"p"),e(58,"Setting "),n(59,"code"),e(60,"nzPriority"),t(),e(61," will add the "),n(62,"code"),e(63,'<link rel="preload">'),t(),e(64," tag when rendering server-side (SSR), and browsers will treat it as a high priority resource to load. You can see this in "),n(65,"a",23),e(66,"MDN - Preloading"),t(),e(67,", "),n(68,"a",24),e(69,"web.dev - Preloading responsive images"),t(),e(70," to learn more."),t(),n(71,"p"),e(72,"Note: usually we only need to set "),n(73,"code"),e(74,"nzPriority"),t(),e(75," 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(76,"pre")(77,"code",25),e(78,`@for (product of products; track product)
44  `),n(79,"span",26)(80,"span",26)(81,"span",27),e(82,"<"),t(),e(83,"nz-image"),t(),e(84," "),n(85,"span",28),e(86,"[nzPriority]"),t(),n(87,"span",29)(88,"span",30),e(89,"="),t(),n(90,"span",27),e(91,'"'),t(),e(92,"$index <= 8"),n(93,"span",27),e(94,'"'),t()(),n(95,"span",27),e(96,">"),t()(),n(97,"span",26)(98,"span",26)(99,"span",27),e(100,"</"),t(),e(101,"nz-image"),t(),n(102,"span",27),e(103,">"),t()(),e(104,`
45}
46`),t()(),c(),t()(),n(105,"nz-code-box",31),r(106,"nz-demo-experimental-image-src-loader",21),n(107,"div",22),E(),n(108,"p"),e(109,"Custom "),n(110,"code"),e(111,"nzSrcLoader"),t(),e(112," is used to resolve image URLs, or you can also use the built-in image CND provider's Loaders. "),r(113,"br"),e(114,`
47We recommend always specifying the image size (`),n(115,"code"),e(116,"nzWidth"),t(),e(117,", "),n(118,"code"),e(119,"nzHeight"),t(),e(120,"), which can help improve the key metrics of the web experience "),n(121,"a",32),e(122,"CLS"),t(),e(123,", and can also be used with the Loader to optimize the images using the image CND to improve the loading speed. "),r(124,"br"),e(125,`
48If you want to use a different Loader in a different environment you can do the following.`),t(),n(126,"pre")(127,"code",33)(128,"span",34),e(129,"import"),t(),e(130," "),n(131,"span",27),e(132,"{"),t(),e(133," environment "),n(134,"span",27),e(135,"}"),t(),e(136," "),n(137,"span",34),e(138,"from"),t(),e(139," "),n(140,"span",35),e(141,"'environments/environment'"),t(),n(142,"span",27),e(143,";"),t(),e(144,`
49
50`),n(145,"span",34),e(146,"import"),t(),e(147," "),n(148,"span",27),e(149,"{"),t(),e(150," NzConfig"),n(1

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

72string"),t(),n(549,"span",27),e(550,")"),t(),n(551,"span",36),e(552,":"),t(),e(553," NzImageSrcLoader"),n(554,"span",27),e(555,";"),t(),e(556,`
73
74`),n(557,"span",55),e(558,`/**
75 * ImgixLoader return format
76 * {domain}/{src}?format=auto&fit=max&w={width}
77 */`),t(),e(559,`
78`),n(560,"span",34),e(561,"export"),t(),e(562," "),n(563,"span",34),e(564,"function"),t(),e(565," "),n(566,"span",37),e(567,"createImgixLoader"),t(),n(568,"span",27),e(569,"("),t(),e(570,"domain"),n(571,"span",36),e(572,":"),t(),e(573," "),n(574,"span",49),e(575,"string"),t(),n(576,"span",27),e(577,")"),t(),n(578,"span",36),e(579,":"),t(),e(580," NzImageSrcLoader"),n(581,"span",27),e(582,";"),t(),e(583,`
79
80`),n(584,"span",55),e(585,`/**
81 * CloudinaryLoader return format
82 * {domain}/c_limit,q_auto,w_{width}/{src}
83 */`),t(),e(586,`
84`),n(587,"span",34),e(588,"export"),t(),e(589," "),n(590,"span",34),e(591,"function"),t(),e(592," "),n(593,"span",37),e(594,"createCloudinaryLoader"),t(),n(595,"span",27),e(596,"("),t(),e(597,"domain"),n(598,"span",36),e(599,":"),t(),e(600," "),n(601,"span",49),e(602,"string"),t(),n(603,"span",27),e(604,")"),t(),n(605,"span",36),e(606,":"),t(),e(607," NzImageSrcLoader"),n(608,"span",27),e(609,";"),t(),e(610,`
85`),t()(),n(611,"h3",56)(612,"span"),e(613,"Responsive images and preloaded images"),t(),n(614,"a",57),e(615,"#"),t()(),n(616,"p"),e(617,"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(618,"ul")(619,"li")(620,"a",24),e(621,"preloading responsive images"),t()(),n(622,"li")(623,"a",58),e(624,"next.js image component and image optimization"),t()()(),c(),t()()),a&2&&(p(),s("nzOffsetTop",16),p(),s("nzAffix",!1),p(50),s("nzGutter",8),p(),s("nzSpan",24),p(),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"),p(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"),p(162),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:[Z,f,U,j,G,W,M,O,R,T,w,k,L],encapsulation:2})};var Le=[{path:"en",component:q},{path:"zh",component:Q}],gt=Le;export{gt as default};