1 | "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=Image;var _objectWithoutPropertiesLoose2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _head=_interopRequireDefault(require("../next-server/lib/head"));var _toBase=require("../next-server/lib/to-base-64");var _imageConfig=require("../next-server/server/image-config");var _useIntersection=require("./use-intersection");if(typeof window==='undefined'){;global.__NEXT_IMAGE_IMPORTED=true;}const VALID_LOADING_VALUES=['lazy','eager',undefined];const loaders=new Map([['imgix',imgixLoader],['cloudinary',cloudinaryLoader],['akamai',akamaiLoader],['default',defaultLoader]]);const VALID_LAYOUT_VALUES=['fill','fixed','intrinsic','responsive',undefined];function isStaticRequire(src){return src.default!==undefined;}function isStaticImageData(src){return src.src!==undefined;}function isStaticImport(src){return typeof src==='object'&&(isStaticRequire(src)||isStaticImageData(src));}const{deviceSizes:configDeviceSizes,imageSizes:configImageSizes,loader:configLoader,path:configPath,domains:configDomains}=process.env.__NEXT_IMAGE_OPTS||_imageConfig.imageConfigDefault;
|
2 | const allSizes=[...configDeviceSizes,...configImageSizes];configDeviceSizes.sort((a,b)=>a-b);allSizes.sort((a,b)=>a-b);function getWidths(width,layout,sizes){if(sizes&&(layout==='fill'||layout==='responsive')){
|
3 | const viewportWidthRe=/(^|\s)(1?\d?\d)vw/g;const percentSizes=[];for(let match;match=viewportWidthRe.exec(sizes);match){percentSizes.push(parseInt(match[2]));}if(percentSizes.length){const smallestRatio=Math.min(...percentSizes)*0.01;return{widths:allSizes.filter(s=>s>=configDeviceSizes[0]*smallestRatio),kind:'w'};}return{widths:allSizes,kind:'w'};}if(typeof width!=='number'||layout==='fill'||layout==='responsive'){return{widths:configDeviceSizes,kind:'w'};}const widths=[...new Set(
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | [width,width*2].map(w=>allSizes.find(p=>p>=w)||allSizes[allSizes.length-1]))];return{widths,kind:'x'};}function generateImgAttrs({src,unoptimized,layout,width,quality,sizes,loader}){if(unoptimized){return{src,srcSet:undefined,sizes:undefined};}const{widths,kind}=getWidths(width,layout,sizes);const last=widths.length-1;return{sizes:!sizes&&kind==='w'?'100vw':sizes,srcSet:widths.map((w,i)=>`${loader({src,quality,width:w})} ${kind==='w'?w:i+1}${kind}`).join(', '),
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | src:loader({src,quality,width:widths[last]})};}function getInt(x){if(typeof x==='number'){return x;}if(typeof x==='string'){return parseInt(x,10);}return undefined;}function defaultImageLoader(loaderProps){const load=loaders.get(configLoader);if(load){return load((0,_extends2.default)({root:configPath},loaderProps));}throw new Error(`Unknown "loader" found in "next.config.js". Expected: ${_imageConfig.VALID_LOADERS.join(', ')}. Received: ${configLoader}`);}
|
18 |
|
19 | function removePlaceholder(img,placeholder){if(placeholder==='blur'&&img){const handleLoad=()=>{if(!img.src.startsWith('data:')){const p='decode'in img?img.decode():Promise.resolve();p.catch(()=>{}).then(()=>{img.style.filter='none';img.style.backgroundSize='none';img.style.backgroundImage='none';});}};if(img.complete){
|
20 |
|
21 |
|
22 | handleLoad();}else{img.onload=handleLoad;}}}function Image(_ref){let{src,sizes,unoptimized=false,priority=false,loading,className,quality,width,height,objectFit,objectPosition,loader=defaultImageLoader,placeholder='empty',blurDataURL}=_ref,all=(0,_objectWithoutPropertiesLoose2.default)(_ref,["src","sizes","unoptimized","priority","loading","className","quality","width","height","objectFit","objectPosition","loader","placeholder","blurDataURL"]);let rest=all;let layout=sizes?'responsive':'intrinsic';if('layout'in rest){
|
23 | if(rest.layout)layout=rest.layout;
|
24 | delete rest['layout'];}let staticSrc='';if(isStaticImport(src)){const staticImageData=isStaticRequire(src)?src.default:src;if(!staticImageData.src){throw new 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 ${JSON.stringify(staticImageData)}`);}blurDataURL=blurDataURL||staticImageData.blurDataURL;staticSrc=staticImageData.src;if(!layout||layout!=='fill'){height=height||staticImageData.height;width=width||staticImageData.width;if(!staticImageData.height||!staticImageData.width){throw new 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 ${JSON.stringify(staticImageData)}`);}}}src=typeof src==='string'?src:staticSrc;const widthInt=getInt(width);const heightInt=getInt(height);const qualityInt=getInt(quality);if(process.env.NODE_ENV!=='production'){if(!src){throw new Error(`Image is missing required "src" property. Make sure you pass "src" in props to the \`next/image\` component. Received: ${JSON.stringify({width,height,quality})}`);}if(!VALID_LAYOUT_VALUES.includes(layout)){throw new Error(`Image with src "${src}" has invalid "layout" property. Provided "${layout}" should be one of ${VALID_LAYOUT_VALUES.map(String).join(',')}.`);}if(typeof widthInt!=='undefined'&&isNaN(widthInt)||typeof heightInt!=='undefined'&&isNaN(heightInt)){throw new Error(`Image with src "${src}" has invalid "width" or "height" property. These should be numeric values.`);}if(!VALID_LOADING_VALUES.includes(loading)){throw new Error(`Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(String).join(',')}.`);}if(priority&&loading==='lazy'){throw new Error(`Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used.`);}if(placeholder==='blur'){if(layout!=='fill'&&(widthInt||0)*(heightInt||0)<1600){console.warn(`Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`);}if(!blurDataURL){const VALID_BLUR_EXT=['jpeg','png','webp'];
|
25 | throw new Error(`Image with src "${src}" has "placeholder='blur'" property but is missing the "blurDataURL" property.
|
26 | Possible solutions:
|
27 | - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image
|
28 | - Change the "src" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(',')}
|
29 | - Remove the "placeholder" property, effectively no blur effect
|
30 | Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`);}}}let isLazy=!priority&&(loading==='lazy'||typeof loading==='undefined');if(src&&src.startsWith('data:')){
|
31 | unoptimized=true;isLazy=false;}const[setRef,isIntersected]=(0,_useIntersection.useIntersection)({rootMargin:'200px',disabled:!isLazy});const isVisible=!isLazy||isIntersected;let wrapperStyle;let sizerStyle;let sizerSvg;let imgStyle=(0,_extends2.default)({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,objectPosition},placeholder==='blur'?{filter:'blur(20px)',backgroundSize:'cover',backgroundImage:`url("${blurDataURL}")`}:undefined);if(typeof widthInt!=='undefined'&&typeof heightInt!=='undefined'&&layout!=='fill'){
|
32 | const quotient=heightInt/widthInt;const paddingTop=isNaN(quotient)?'100%':`${quotient*100}%`;if(layout==='responsive'){
|
33 | wrapperStyle={display:'block',overflow:'hidden',position:'relative',boxSizing:'border-box',margin:0};sizerStyle={display:'block',boxSizing:'border-box',paddingTop};}else if(layout==='intrinsic'){
|
34 | wrapperStyle={display:'inline-block',maxWidth:'100%',overflow:'hidden',position:'relative',boxSizing:'border-box',margin:0};sizerStyle={boxSizing:'border-box',display:'block',maxWidth:'100%'};sizerSvg=`<svg width="${widthInt}" height="${heightInt}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`;}else if(layout==='fixed'){
|
35 | wrapperStyle={overflow:'hidden',boxSizing:'border-box',display:'inline-block',position:'relative',width:widthInt,height:heightInt};}}else if(typeof widthInt==='undefined'&&typeof heightInt==='undefined'&&layout==='fill'){
|
36 | wrapperStyle={display:'block',overflow:'hidden',position:'absolute',top:0,left:0,bottom:0,right:0,boxSizing:'border-box',margin:0};}else{
|
37 | if(process.env.NODE_ENV!=='production'){throw new Error(`Image with src "${src}" must use "width" and "height" properties or "layout='fill'" property.`);}}let imgAttributes={src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',srcSet:undefined,sizes:undefined};if(isVisible){imgAttributes=generateImgAttrs({src,unoptimized,layout,width:widthInt,quality:qualityInt,sizes,loader});}return_react.default.createElement("div",{style:wrapperStyle},sizerStyle?_react.default.createElement("div",{style:sizerStyle},sizerSvg?_react.default.createElement("img",{style:{maxWidth:'100%',display:'block',margin:0,border:'none',padding:0},alt:"","aria-hidden":true,role:"presentation",src:`data:image/svg+xml;base64,${(0,_toBase.toBase64)(sizerSvg)}`}):null):null,!isVisible&&_react.default.createElement("noscript",null,_react.default.createElement("img",Object.assign({},rest,generateImgAttrs({src,unoptimized,layout,width:widthInt,quality:qualityInt,sizes,loader}),{decoding:"async",style:imgStyle,className:className}))),_react.default.createElement("img",Object.assign({},rest,imgAttributes,{decoding:"async",className:className,ref:element=>{setRef(element);removePlaceholder(element,placeholder);},style:imgStyle})),priority?
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | _react.default.createElement(_head.default,null,_react.default.createElement("link",{key:'__nimg-'+imgAttributes.src+imgAttributes.srcSet+imgAttributes.sizes,rel:"preload",as:"image",href:imgAttributes.srcSet?undefined:imgAttributes.src
|
43 | ,imagesrcset:imgAttributes.srcSet
|
44 | ,imagesizes:imgAttributes.sizes})):null);}
|
45 | function normalizeSrc(src){return src[0]==='/'?src.slice(1):src;}function imgixLoader({root,src,width,quality}){
|
46 | const params=['auto=format','fit=max','w='+width];let paramsString='';if(quality){params.push('q='+quality);}if(params.length){paramsString='?'+params.join('&');}return`${root}${normalizeSrc(src)}${paramsString}`;}function akamaiLoader({root,src,width}){return`${root}${normalizeSrc(src)}?imwidth=${width}`;}function cloudinaryLoader({root,src,width,quality}){
|
47 | const params=['f_auto','c_limit','w_'+width,'q_'+(quality||'auto')];let paramsString=params.join(',')+'/';return`${root}${paramsString}${normalizeSrc(src)}`;}function defaultLoader({root,src,width,quality}){if(process.env.NODE_ENV!=='production'){const missingValues=[];
|
48 | if(!src)missingValues.push('src');if(!width)missingValues.push('width');if(missingValues.length>0){throw new Error(`Next Image Optimization requires ${missingValues.join(', ')} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);}if(src.startsWith('//')){throw new Error(`Failed to parse src "${src}" on \`next/image\`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)`);}if(!src.startsWith('/')&&configDomains){let parsedSrc;try{parsedSrc=new URL(src);}catch(err){console.error(err);throw new Error(`Failed to parse src "${src}" on \`next/image\`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`);}if(!configDomains.includes(parsedSrc.hostname)){throw new Error(`Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n`+`See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host`);}}}return`${root}?url=${encodeURIComponent(src)}&w=${width}&q=${quality||75}`;}
|
49 |
|
\ | No newline at end of file |