https://inflearn-nextjs.vercel.app/_next/static/chunks/pages/section2/images-f78a132c510ab821.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[384],{8290:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/section2/images",function(){return i(8652)}])},3762:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){let t;var i,{src:a,sizes:r,unoptimized:g=!1,priority:f=!1,loading:p,lazyRoot:y=null,lazyBoundary:z,className:E,quality:S,width:O,height:_,style:k,objectFit:I,objectPosition:R,onLoadingComplete:C,placeholder:D="empty",blurDataURL:N}=e,B=l(e,["src","sizes","unoptimized","priority","loading","lazyRoot","lazyBoundary","className","quality","width","height","style","objectFit","objectPosition","onLoadingComplete","placeholder","blurDataURL"]);let M=o.useContext(u.ImageConfigContext),L=o.useMemo(()=>{let e=h||M||c.imageConfigDefault,t=[...e.deviceSizes,...e.imageSizes].sort((e,t)=>e-t),i=e.deviceSizes.sort((e,t)=>e-t);return n({},e,{allSizes:t,deviceSizes:i})},[M]),Q=B,P=r?"responsive":"intrinsic";"layout"in Q&&(Q.layout&&(P=Q.layout),delete Q.layout);let q=w;if("loader"in Q){if(Q.loader){let W=Q.loader;q=e=>{let{config:t}=e,i=l(e,["config"]);return W(i)}}delete Q.loader}let F="";if("object"==typeof(i=a)&&(x(i)||void 0!==i.src)){let U=x(a)?a.default:a;if(!U.src)throw Error("An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ".concat(JSON.stringify(U)));if(N=N||U.blurDataURL,F=U.src,(!P||"fill"!==P)&&(_=_||U.height,O=O||U.width,!U.height||!U.width))throw Error("An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ".concat(JSON.stringify(U)))}let H=!f&&("lazy"===p||void 0===p);((a="string"==typeof a?a:F).startsWith("data:")||a.startsWith("blob:"))&&(g=!0,H=!1),A.has(a)&&(H=!1),L.unoptimized&&(g=!0);let[J,T]=o.useState(!1),[V,Z,G]=d.useIntersection({rootRef:y,rootMargin:z||"200px",disabled:!H}),K=!H||Z,X={boxSizing:"border-box",display:"block",overflow:"hidden",width:"initial",height:"initial",background:"none",opacity:1,border:0,margin:0,padding:0},Y={boxSizing:"border-box",display:"block",width:"initial",height:"initial",background:"none",opacity:1,border:0,margin:0,padding:0},$=!1,ee=v(O),et=v(_),ei=v(S),en=Object.assign({},k,{position:"absolute",top:0,left:0,bottom:0,right:0,boxSizing:"border-box",padding:0,border:"none",margin:"auto",display:"block",width:0,height:0,minWidth:"100%",maxWidth:"100%",minHeight:"100%",maxHeight:"100%",objectFit:I,objectPosition:R}),ea="blur"!==D||J?{}:{backgroundSize:I||"cover",backgroundPosition:R||"0% 0%",filter:"blur(20px)",backgroundImage:'url("'.concat(N,'")')};if("fill"===P)X.display="block",X.position="absolute",X.top=0,X.left=0,X.bottom=0,X.right=0;else if(void 0!==ee&&void 0!==et){let er=et/ee,el=isNaN(er)?"100%":"".concat(100*er,"%");"responsive"===P?(X.display="block",X.position="relative",$=!0,Y.paddingTop=el):"intrinsic"===P?(X.display="inline-block",X.position="relative",X.maxWidth="100%",$=!0,Y.maxWidth="100%",t="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27".concat(ee,"%27%20height=%27").concat(et,"%27/%3e")):"fixed"===P&&(X.display="inline-block",X.position="relative",X.width=ee,X.height=et)}let eo={src:m,srcSet:void 0,sizes:void 0};K&&(eo=b({config:L,src:a,unoptimized:g,layout:P,width:ee,quality:ei,sizes:r,loader:q}));let es=a,ec={imageSrcSet:eo.srcSet,imageSizes:eo.sizes,crossOrigin:Q.crossOrigin},ed=o.default.useLayoutEffect,eu=o.useRef(C),eg=o.useRef(a);o.useEffect(()=>{eu.current=C},[C]),ed(()=>{eg.current!==a&&(G(),eg.current=a)},[G,a]);let ef=n({isLazy:H,imgAttributes:eo,heightInt:et,widthInt:ee,qualityInt:ei,layout:P,className:E,imgStyle:en,blurStyle:ea,loading:p,config:L,unoptimized:g,placeholder:D,loader:q,srcString:es,onLoadingCompleteRef:eu,setBlurComplete:T,setIntersection:V,isVisible:K,noscriptSizes:r},Q);return o.default.createElement(o.default.Fragment,null,o.default.createElement("span",{style:X},$?o.default.createElement("span",{style:Y},t?o.default.createElement("img",{style:{display:"block",maxWidth:"100%",width:"initial",height:"initial",background:"none",opacity:1,border:0,margin:0,padding:0},alt:"","aria-hidden":!0,src:t}):null):null,o.default.createElement(j,Object.assign({},ef))),f?o.default.createElement(s.default,null,o.default.createElement("link",Object.assign({key:"__nimg-"+eo.src+eo.srcSet+eo.sizes,rel:"preload",as:"image",href:eo.srcSet?void 0:eo.src},ec))):null)};var n=i(6495).Z,a=i(2648).Z,r=i(1598).Z,l=i(7273).Z,o=r(i(7294)),s=a(i(3121)),c=i(139),d=i(9246),u=i(8730);i(7238);var g=i(2700);function f(e){return"/"===e[0]?e.slice(1):e}let h={deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1},A=new Set,m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",p=new Map([["default",function(e){let{c

1onfig:t,src:i,width:n,quality:a}=e;return i.endsWith(".svg")&&!t.dangerouslyAllowSVG?i:"".concat(g.normalizePathTrailingSlash(t.path),"?url=").concat(encodeURIComponent(i),"&w=").concat(n,"&q=").concat(a||75)}],["imgix",function(e){let{config:t,src:i,width:n,quality:a}=e,r=new URL("".concat(t.path).concat(f(i))),l=r.searchParams;return l.set("auto",l.getAll("auto").join(",")||"format"),l.set("fit",l.get("fit")||"max"),l.set("w",l.get("w")||n.toString()),a&&l.set("q",a.toString()),r.href}],["cloudinary",function(e){let{config:t,src:i,width:n,quality:a}=e,r=["f_auto","c_limit","w_"+n,"q_"+(a||"auto")].join(",")+"/";return"".concat(t.path).concat(r).concat(f(i))}],["akamai",function(e){let{config:t,src:i,width:n}=e;return"".concat(t.path).concat(f(i),"?imwidth=").concat(n)}],["custom",function(e){let{src:t}=e;throw Error('Image with src "'.concat(t,'" is missing "loader" prop.')+"\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader")}]]);function x(e){return void 0!==e.default}function b(e){let{config:t,src:i,unoptimized:n,layout:a,width:r,quality:l,sizes:o,loader:s}=e;if(n)return{src:i,srcSet:void 0,sizes:void 0};let{widths:c,kind:d}=function(e,t,i,n){let{deviceSizes:a,allSizes:r}=e;if(n&&("fill"===i||"responsive"===i)){let l=/(^|\s)(1?\d?\d)vw/g,o=[];for(let s;s=l.exec(n);s)o.push(parseInt(s[2]));if(o.length){let c=.01*Math.min(...o);return{widths:r.filter(e=>e>=a[0]*c),kind:"w"}}return{widths:r,kind:"w"}}if("number"!=typeof t||"fill"===i||"responsive"===i)return{widths:a,kind:"w"};let d=[...new Set([t,2*t].map(e=>r.find(t=>t>=e)||r[r.length-1]))];return{widths:d,kind:"x"}}(t,r,a,o),u=c.length-1;return{sizes:o||"w"!==d?o:"100vw",srcSet:c.map((e,n)=>"".concat(s({config:t,src:i,quality:l,width:e})," ").concat("w"===d?e:n+1).concat(d)).join(", "),src:s({config:t,src:i,quality:l,width:c[u]})}}function v(e){return"number"==typeof e?e:"string"==typeof e?parseInt(e,10):void 0}function w(e){var t;let i=(null==(t=e.config)?void 0:t.loader)||"default",n=p.get(i);if(n)return n(e);throw Error('Unknown "loader" found in "next.config.js". Expected: '.concat(c.VALID_LOADERS.join(", "),". Received: ").concat(i))}function y(e,t,i,n,a,r){if(!e||e.src===m||e["data-loaded-src"]===t)return;e["data-loaded-src"]=t;let l="decode"in e?e.decode():Promise.resolve();l.catch(()=>{}).then(()=>{if(e.parentNode&&(A.add(t),"blur"===n&&r(!0),null==a?void 0:a.current)){let{naturalWidth:i,naturalHeight:l}=e;a.current({naturalWidth:i,naturalHeight:l})}})}let j=e=>{var{imgAttributes:t,heightInt:i,widthInt:a,qualityInt:r,layout:s,className:c,imgStyle:d,blurStyle:u,isLazy:g,placeholder:f,loading:h,srcString:A,config:m,unoptimized:p,loader:x,onLoadingCompleteRef:v,setBlurComplete:w,setIntersection:j,onLoad:z,onError:E,isVisible:S,noscriptSizes:O}=e,_=l(e,["imgAttributes","heightInt","widthInt","qualityInt","layout","className","imgStyle","blurStyle","isLazy","placeholder","loading","srcString","config","unoptimized","loader","onLoadingCompleteRef","setBlurComplete","setIntersection","onLoad","onError","isVisible","noscriptSizes"]);return h=g?"lazy":h,o.default.createElement(o.default.Fragment,null,o.default.createElement("img",Object.assign({},_,t,{decoding:"async","data-nimg":s,className:c,style:n({},d,u),ref:o.useCallback(e=>{j(e),(null==e?void 0:e.complete)&&y(e,A,s,f,v,w)},[j,A,s,f,v,w]),onLoad:e=>{let t=e.currentTarget;y(t,A,s,f,v,w),z&&z(e)},onError:e=>{"blur"===f&&w(!0),E&&E(e)}})),(g||"blur"===f)&&o.default.createElement("noscript",null,o.default.createElement("img",Object.assign({},_,b({config:m,src:A,unoptimized:p,layout:s,width:a,quality:r,sizes:O,loader:x}),{decoding:"async","data-nimg":s,style:d,className:c,loading:h}))))};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9246:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.useIntersection=function(e){let{rootRef:t,rootMargin:i,disabled:s}=e,c=s||!r,[d,u]=n.useState(!1),[g,f]=n.useState(null);n.useEffect(()=>{if(r){if(!c&&!d&&g&&g.tagName){let e=function(e,t,i){let{id:n,observer:a,elements:r}=function(e){let t;let i={root:e.root||null,margin:e.rootMargin||""},n=o.find(e=>e.root===i.root&&e.margin===i.margin);if(n&&(t=l.get(n)))return t;let a=new Map,r=new IntersectionObserver(e=>

1{e.forEach(e=>{let t=a.get(e.target),i=e.isIntersecting||e.intersectionRatio>0;t&&i&&t(i)})},e);return t={id:i,observer:r,elements:a},o.push(i),l.set(i,t),t}(i);return r.set(e,t),a.observe(e),function(){if(r.delete(e),a.unobserve(e),0===r.size){a.disconnect(),l.delete(n);let t=o.findIndex(e=>e.root===n.root&&e.margin===n.margin);t>-1&&o.splice(t,1)}}}(g,e=>e&&u(e),{root:null==t?void 0:t.current,rootMargin:i});return e}}else if(!d){let n=a.requestIdleCallback(()=>u(!0));return()=>a.cancelIdleCallback(n)}},[g,c,i,t,d]);let h=n.useCallback(()=>{u(!1)},[]);return[f,d,h]};var n=i(7294),a=i(4686);let r="function"==typeof IntersectionObserver,l=new Map,o=[];("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8652:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return d}});var n=i(5893),a=i(5675),r=i.n(a),l=i(9755),o=i.n(l),s={src:"/_next/static/media/example.bb157e4c.jpg",height:422,width:922,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAEAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAaEAEBAAIDAAAAAAAAAAAAAAABAAIDERNh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/xAAVEQEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEQMRAD8ApxqR57M3xZJQgl//2Q==",blurWidth:8,blurHeight:4};let c=()=>(0,n.jsxs)("main",{children:[(0,n.jsx)("hr",{style:{margin:"32px 0"}}),(0,n.jsx)("h1",{children:"next/image"}),(0,n.jsxs)("figure",{children:[(0,n.jsx)(r(),{src:s,alt:"v13 image"}),(0,n.jsx)("figcaption",{children:"v13 image"})]}),(0,n.jsxs)("figure",{children:[(0,n.jsx)(r(),{src:"https://inflearn-nextjs.vercel.app/example.jpg",alt:"v13 image",width:500,height:100}),(0,n.jsx)("figcaption",{children:"v13 image"})]}),(0,n.jsx)("figure",{style:{position:"relative",width:"500px",height:"100px"},children:(0,n.jsx)(r(),{src:"https://inflearn-nextjs.vercel.app/example.jpg",alt:"v13 fill",fill:!0,style:{objectFit:"cover"}})}),(0,n.jsx)("hr",{style:{margin:"32px 0"}}),(0,n.jsx)("h1",{children:"next/legacy/image"}),(0,n.jsxs)("figure",{children:[(0,n.jsx)(o(),{src:s,alt:"example image"}),(0,n.jsx)("figcaption",{children:"intrinsic static image"})]}),(0,n.jsxs)("figure",{children:[(0,n.jsx)(o(),{src:"/example.jpg",alt:"intrinsic image",width:500,height:100}),(0,n.jsx)("figcaption",{children:"intrinsic remote image"})]}),(0,n.jsxs)("figure",{children:[(0,n.jsx)(o(),{src:s,alt:"fixed image",layout:"fixed",width:500,height:100}),(0,n.jsx)("figcaption",{children:"fixed image"})]}),(0,n.jsxs)("figure",{children:[(0,n.jsx)(o(),{src:s,alt:"responsive image",layout:"responsive",width:500,height:100}),(0,n.jsx)("figcaption",{children:"responsive image"})]}),(0,n.jsxs)("figure",{children:[(0,n.jsx)("div",{style:{width:500,height:100,position:"relative"},children:(0,n.jsx)(o(),{src:"/example.jpg",alt:"fill image",layout:"fill",objectFit:"cover"})}),(0,n.jsx)("figcaption",{children:"fill image"})]}),(0,n.jsx)("hr",{style:{margin:"32px 0"}})]});var d=c},9755:function(e,t,i){e.exports=i(3762)}},function(e){e.O(0,[675,774,888,179],function(){return e(e.s=8290)}),_N_E=e.O()}]);