UNPKG

gatsby-plugin-image

Version:

Adding responsive images to your site while maintaining high performance scores can be difficult to do manually. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you!

3 lines (2 loc) 20.3 kB
var e=require("react"),t=require("common-tags"),r=require("camelcase"),a=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,t}var o,s=i(e),l=n(e),u=i(r),d=n(a),c=i(a);function h(){return h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},h.apply(this,arguments)}function p(e,t){return p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},p(e,t)}function f(e,t){if(null==e)return{};var r,a,i={},n=Object.keys(e);for(a=0;a<n.length;a++)t.indexOf(r=n[a])>=0||(i[r]=e[r]);return i}var g=[.25,.5,1,2],m=[750,1080,1366,1920],v=[320,654,768,1024,1366,1600,1920,2048,2560,3440,3840,4096],y=function(e){return console.warn(e)},w=function(e,t){return e-t},b=function(e){return e.map(function(e){return e.src+" "+e.width+"w"}).join(",\n")};function E(e){var t=e.lastIndexOf(".");if(-1!==t){var r=e.slice(t+1);if("jpeg"===r)return"jpg";if(3===r.length||4===r.length)return r}}function R(e){var t=e.layout,r=void 0===t?"constrained":t,a=e.width,i=e.height,n=e.sourceMetadata,o=e.breakpoints,s=e.aspectRatio,l=e.formats,d=void 0===l?["auto","webp"]:l;return d=d.map(function(e){return e.toLowerCase()}),r=u.default(r),a&&i?h({},e,{formats:d,layout:r,aspectRatio:a/i}):(n.width&&n.height&&!s&&(s=n.width/n.height),"fullWidth"===r?(a=a||n.width||o[o.length-1],i=i||Math.round(a/(s||1.3333333333333333))):(a||(a=i&&s?i*s:n.width?n.width:i?Math.round(i/1.3333333333333333):800),s&&!i?i=Math.round(a/s):s||(s=a/i)),h({},e,{width:a,height:i,aspectRatio:s,layout:r,formats:d}))}function S(e){var r,a=(e=R(e)).pluginName,i=e.sourceMetadata,n=e.generateImageSource,s=e.layout,l=e.fit,u=e.options,d=e.width,c=e.height,p=e.filename,f=e.reporter,v=void 0===f?{warn:y}:f,w=e.backgroundColor,S=e.placeholderURL;if(a||v.warn('[gatsby-plugin-image] "generateImageData" was not passed a plugin name'),"function"!=typeof n)throw new Error("generateImageSource must be a function");i&&(i.width||i.height)?i.format||(i.format=E(p)):i={width:d,height:c,format:(null==(r=i)?void 0:r.format)||E(p)||"auto"};var k=new Set(e.formats);(0===k.size||k.has("auto")||k.has(""))&&(k.delete("auto"),k.delete(""),k.add(i.format)),k.has("jpg")&&k.has("png")&&(v.warn("["+a+"] Specifying both 'jpg' and 'png' formats is not supported. Using 'auto' instead"),k.delete("jpg"===i.format?"png":"jpg"));var _=function(e){var r=e.filename,a=e.layout,i=void 0===a?"constrained":a,n=e.sourceMetadata,s=e.reporter,l=void 0===s?{warn:y}:s,u=e.breakpoints,d=void 0===u?m:u,c=Object.entries({width:e.width,height:e.height}).filter(function(e){var t=e[1];return"number"==typeof t&&t<1});if(c.length)throw new Error("Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are "+c.map(function(e){return e.join(": ")}).join(", "));return"fixed"===i?function(e){var r=e.filename,a=e.sourceMetadata,i=e.width,n=e.height,s=e.fit,l=void 0===s?"cover":s,u=e.outputPixelDensities,d=e.reporter,c=void 0===d?{warn:y}:d,h=a.width/a.height,p=x(void 0===u?g:u);if(i&&n){var f=M(a,{width:i,height:n,fit:l});i=f.width,n=f.height,h=f.aspectRatio}i?n||(n=Math.round(i/h)):i=n?Math.round(n*h):800;var m,v,w=i;if(a.width<i||a.height<n){var b=a.width<i?"width":"height";c.warn(t.stripIndent(o||(m=["\n The requested ",' "','px" for the image '," was larger than the actual image "," of ","px. If possible, replace the current image with a larger one."],v||(v=m.slice(0)),m.raw=v,o=m),b,"width"===b?i:n,r,b,a[b])),"width"===b?(i=a.width,n=Math.round(i/h)):i=(n=a.height)*h}return{sizes:p.filter(function(e){return e>=1}).map(function(e){return Math.round(e*i)}).filter(function(e){return e<=a.width}),aspectRatio:h,presentationWidth:w,presentationHeight:Math.round(w/h),unscaledWidth:i}}(e):"constrained"===i?L(e):"fullWidth"===i?L(h({breakpoints:d},e)):(l.warn("No valid layout was provided for the image at "+r+". Valid image layouts are fixed, fullWidth, and constrained. Found "+i),{sizes:[n.width],presentationWidth:n.width,presentationHeight:n.height,aspectRatio:n.width/n.height,unscaledWidth:n.width})}(h({},e,{sourceMetadata:i})),j={sources:[]},I=e.sizes;I||(I=function(e,t){switch(t){case"constrained":return"(min-width: "+e+"px) "+e+"px, 100vw";case"fixed":return e+"px";case"fullWidth":return"100vw";default:return}}(_.presentationWidth,s)),k.forEach(function(e){var t=_.sizes.map(function(t){var r=n(p,t,Math.round(t/_.aspectRatio),e,l,u);if(null!=r&&r.width&&r.height&&r.src&&r.format)return r;v.warn("["+a+"] The resolver for image "+p+" returned an invalid value.")}).filter(Boolean);if("jpg"===e||"png"===e||"auto"===e){var r=t.find(function(e){return e.width===_.unscaledWidth})||t[0];r&&(j.fallback={src:r.src,srcSet:b(t),sizes:I})}else{var i;null==(i=j.sources)||i.push({srcSet:b(t),sizes:I,type:"image/"+e})}});var O={images:j,layout:s,backgroundColor:w};switch(S&&(O.placeholder={fallback:S}),s){case"fixed":O.width=_.presentationWidth,O.height=_.presentationHeight;break;case"fullWidth":O.width=1,O.height=1/_.aspectRatio;break;case"constrained":O.width=e.width||_.presentationWidth||1,O.height=(O.width||1)/_.aspectRatio}return O}var x=function(e){return Array.from(new Set([1].concat(e))).sort(w)};function L(e){var t,r=e.sourceMetadata,a=e.width,i=e.height,n=e.fit,o=void 0===n?"cover":n,s=e.outputPixelDensities,l=e.breakpoints,u=e.layout,d=r.width/r.height,c=x(void 0===s?g:s);if(a&&i){var h=M(r,{width:a,height:i,fit:o});a=h.width,i=h.height,d=h.aspectRatio}a=a&&Math.min(a,r.width),i=i&&Math.min(i,r.height),a||i||(i=(a=Math.min(800,r.width))/d),a||(a=i*d);var p=a;return(r.width<a||r.height<i)&&(a=r.width,i=r.height),a=Math.round(a),(null==l?void 0:l.length)>0?(t=l.filter(function(e){return e<=r.width})).length<l.length&&!t.includes(r.width)&&t.push(r.width):t=(t=c.map(function(e){return Math.round(e*a)})).filter(function(e){return e<=r.width}),"constrained"!==u||t.includes(a)||t.push(a),{sizes:t=t.sort(w),aspectRatio:d,presentationWidth:p,presentationHeight:Math.round(p/d),unscaledWidth:a}}function M(e,t){var r=e.width/e.height,a=t.width,i=t.height;switch(t.fit){case"fill":a=t.width?t.width:e.width,i=t.height?t.height:e.height;break;case"inside":var n=t.width?t.width:Number.MAX_SAFE_INTEGER,o=t.height?t.height:Number.MAX_SAFE_INTEGER;a=Math.min(n,Math.round(o*r)),i=Math.min(o,Math.round(n/r));break;case"outside":var s=t.width?t.width:0,l=t.height?t.height:0;a=Math.max(s,Math.round(l*r)),i=Math.max(l,Math.round(s/r));break;default:t.width&&!t.height&&(a=t.width,i=Math.round(t.width/r)),t.height&&!t.width&&(a=Math.round(t.height*r),i=t.height)}return{width:a,height:i,aspectRatio:a/i}}var k=["baseUrl","urlBuilder","sourceWidth","sourceHeight","pluginName","formats","breakpoints","options"],_=["images","placeholder"],j=new Set,I=function(){return"undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype};function O(){return"undefined"!=typeof GATSBY___IMAGE&&GATSBY___IMAGE}function N(e){e&&j.add(e)}function W(e){return j.has(e)}var P,z=function(e){var t;return function(e){var t,r;return Boolean(null==e||null==(t=e.images)||null==(r=t.fallback)?void 0:r.src)}(e)?e:function(e){return Boolean(null==e?void 0:e.gatsbyImageData)}(e)?e.gatsbyImageData:null==e||null==(t=e.childImageSharp)?void 0:t.gatsbyImageData},q=["children"],T=function(e){var t=e.layout,r=e.width,a=e.height;return"fullWidth"===t?s.default.createElement("div",{"aria-hidden":!0,style:{paddingTop:a/r*100+"%"}}):"constrained"===t?s.default.createElement("div",{style:{maxWidth:r,display:"block"}},s.default.createElement("img",{alt:"",role:"presentation","aria-hidden":"true",src:"data:image/svg+xml;charset=utf-8,%3Csvg height='"+a+"' width='"+r+"' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E",style:{maxWidth:"100%",display:"block",position:"static"}})):null},D=["src","srcSet","loading","alt","shouldLoad","innerRef"],H=["fallback","sources","shouldLoad"],C=function(e){var t=e.src,r=e.srcSet,a=e.loading,i=e.alt,n=void 0===i?"":i,o=e.shouldLoad,l=e.innerRef,u=f(e,D);return s.default.createElement("img",h({},u,{decoding:"async",loading:a,src:o?t:void 0,"data-src":o?void 0:t,srcSet:o?r:void 0,"data-srcset":o?void 0:r,alt:n,ref:l}))},A=e.forwardRef(function(e,t){var r=e.fallback,a=e.sources,i=void 0===a?[]:a,n=e.shouldLoad,o=void 0===n||n,l=f(e,H),u=l.sizes||(null==r?void 0:r.sizes),d=s.default.createElement(C,h({},l,r,{sizes:u,shouldLoad:o,innerRef:t}));return i.length?s.default.createElement("picture",null,i.map(function(e){var t=e.media,r=e.srcSet,a=e.type;return s.default.createElement("source",{key:t+"-"+a+"-"+r,type:a,media:t,srcSet:o?r:void 0,"data-srcset":o?void 0:r,sizes:u})}),d):d});C.propTypes={src:d.string.isRequired,alt:d.string.isRequired,sizes:d.string,srcSet:d.string,shouldLoad:d.bool},A.displayName="Picture",A.propTypes={alt:d.string.isRequired,shouldLoad:d.bool,fallback:d.exact({src:d.string.isRequired,srcSet:d.string,sizes:d.string}),sources:d.arrayOf(d.oneOfType([d.exact({media:d.string.isRequired,type:d.string,sizes:d.string,srcSet:d.string.isRequired}),d.exact({media:d.string,type:d.string.isRequired,sizes:d.string,srcSet:d.string.isRequired})]))};var F=["fallback"],V=function(e){var t=e.fallback,r=f(e,F);return t?s.default.createElement(A,h({},r,{fallback:{src:t},"aria-hidden":!0,alt:""})):s.default.createElement("div",h({},r))};V.displayName="Placeholder",V.propTypes={fallback:d.string,sources:null==(P=A.propTypes)?void 0:P.sources,alt:function(e,t,r){return e[t]?new Error("Invalid prop `"+t+"` supplied to `"+r+"`. Validation failed."):null}};var G=e.forwardRef(function(e,t){return s.default.createElement(s.default.Fragment,null,s.default.createElement(A,h({ref:t},e)),s.default.createElement("noscript",null,s.default.createElement(A,h({},e,{shouldLoad:!0}))))});G.displayName="MainImage",G.propTypes=A.propTypes;var U,B=function(e,t,r){return e.alt||""===e.alt?c.default.string.apply(c.default,[e,t,r].concat([].slice.call(arguments,3))):new Error('The "alt" prop is required in '+r+'. If the image is purely presentational then pass an empty string: e.g. alt="". Learn more: https://a11y-style-guide.com/style-guide/section-media.html')},J={image:c.default.object.isRequired,alt:B},Y=["style","className"];if(HAS_REACT_18){var X=require("react-dom/client");U=function(e,t,r){return r||(r=X.createRoot(t)),r.render(e),r}}else{var Z=require("react-dom");U=function(e,t){Z.render(e,t)}}var K=function(t){var r,a;function i(r){var a;return(a=t.call(this,r)||this).root=e.createRef(),a.hydrated={current:!1},a.forceRender={current:"development"===process.env.NODE_ENV},a.lazyHydrator=null,a.ref=e.createRef(),a.unobserveRef=void 0,a.reactRootRef=e.createRef(),a.state={isLoading:I(),isLoaded:!1},a}a=t,(r=i).prototype=Object.create(a.prototype),r.prototype.constructor=r,p(r,a);var n=i.prototype;return n._lazyHydrate=function(e,t){var r=this,a=this.root.current.querySelector("[data-gatsby-image-ssr]");return I()&&a&&!this.hydrated.current?(this.hydrated.current=!0,Promise.resolve()):Promise.resolve().then(function(){return require("./lazy-hydrate-1b726509.js")}).then(function(a){var i=a.lazyHydrate,n=JSON.stringify(r.props.image.images);r.lazyHydrator=i(h({image:e.image.images,isLoading:t.isLoading||W(n),isLoaded:t.isLoaded||W(n),toggleIsLoaded:function(){null==e.onLoad||e.onLoad(),r.setState({isLoaded:!0})},ref:r.ref},e),r.root,r.hydrated,r.forceRender,r.reactRootRef)})},n._setupIntersectionObserver=function(e){var t=this;void 0===e&&(e=!0),Promise.resolve().then(function(){return require("./intersection-observer-3d807f12.js")}).then(function(r){var a=(0,r.createIntersectionObserver)(function(){if(t.root.current){var r=JSON.stringify(t.props.image.images);null==t.props.onStartLoad||t.props.onStartLoad({wasCached:e&&W(r)}),t.setState({isLoading:!0,isLoaded:e&&W(r)})}});t.root.current&&(t.unobserveRef=a(t.root))})},n.shouldComponentUpdate=function(e,t){var r=this,a=!1;return this.state.isLoading||!t.isLoading||t.isLoaded||(this.forceRender.current=!0),this.props.image.images!==e.image.images&&(this.unobserveRef&&(this.unobserveRef(),this.hydrated.current&&this.lazyHydrator&&(this.reactRootRef.current=U(null,this.root.current,this.reactRootRef.current))),this.setState({isLoading:!1,isLoaded:!1},function(){r._setupIntersectionObserver(!1)}),a=!0),this.root.current&&!a&&this._lazyHydrate(e,t),!1},n.componentDidMount=function(){if(this.root.current){var e=this.root.current.querySelector("[data-gatsby-image-ssr]"),t=JSON.stringify(this.props.image.images);if(I()&&e&&O()){var r,a;if(null==(r=(a=this.props).onStartLoad)||r.call(a,{wasCached:!1}),e.complete){var i,n;null==(i=(n=this.props).onLoad)||i.call(n),N(t)}else{var o=this;e.addEventListener("load",function r(){e.removeEventListener("load",r),null==o.props.onLoad||o.props.onLoad(),N(t)})}return}this._setupIntersectionObserver(!0)}},n.componentWillUnmount=function(){this.unobserveRef&&(this.unobserveRef(),this.hydrated.current&&this.lazyHydrator&&this.lazyHydrator())},n.render=function(){var e=this.props.as||"div",t=this.props.image,r=t.width,a=t.height,i=t.layout,n=function(e,t,r){var a={},i="gatsby-image-wrapper";return O()||(a.position="relative",a.overflow="hidden"),"fixed"===r?(a.width=e,a.height=t):"constrained"===r&&(O()||(a.display="inline-block",a.verticalAlign="top"),i="gatsby-image-wrapper gatsby-image-wrapper-constrained"),{className:i,"data-gatsby-image-wrapper":"",style:a}}(r,a,i),o=n.style,l=n.className,u=f(n,Y),d=this.props.className;this.props.class&&(d=this.props.class);var c=function(e,t,r){var a=null;return"fullWidth"===e&&(a='<div aria-hidden="true" style="padding-top: '+r/t*100+'%;"></div>'),"constrained"===e&&(a='<div style="max-width: '+t+'px; display: block;"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=\''+r+"' width='"+t+"' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E\" style=\"max-width: 100%; display: block; position: static;\"></div>"),a}(i,r,a);return s.default.createElement(e,h({},u,{style:h({},o,this.props.style,{backgroundColor:this.props.backgroundColor}),className:l+(d?" "+d:""),ref:this.root,dangerouslySetInnerHTML:{__html:c},suppressHydrationWarning:!0}))},i}(e.Component),Q=function(e){if(!e.image)return"development"===process.env.NODE_ENV&&console.warn("[gatsby-plugin-image] Missing image prop"),null;O()||"development"!==process.env.NODE_ENV||console.warn('[gatsby-plugin-image] You\'re missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js');var t=e.image,r=JSON.stringify([t.width,t.height,t.layout,e.className,e.class,e.backgroundColor]);return s.default.createElement(K,h({key:r},e))};Q.propTypes=J,Q.displayName="GatsbyImage";var $=["src","__imageData","__error","width","height","aspectRatio","tracedSVGOptions","placeholder","formats","quality","transformOptions","jpgOptions","pngOptions","webpOptions","avifOptions","blurredOptions"],ee=function(e,t){return"fullWidth"!==e.layout||"width"!==t&&"height"!==t||!e[t]?c.default.number.apply(c.default,[e,t].concat([].slice.call(arguments,2))):new Error('"'+t+'" '+e[t]+" may not be passed when layout is fullWidth.")},te=new Set(["fixed","fullWidth","constrained"]),re={src:c.default.string.isRequired,alt:B,width:ee,height:ee,sizes:c.default.string,layout:function(e){if(void 0!==e.layout&&!te.has(e.layout))return new Error("Invalid value "+e.layout+'" provided for prop "layout". Defaulting to "constrained". Valid values are "fixed", "fullWidth" or "constrained".')}},ae=function(e){return function(t){var r=t.src,a=t.__imageData,i=t.__error,n=f(t,$);return i&&console.warn(i),a?s.default.createElement(e,h({image:a},n)):(console.warn("Image not loaded",r),i||"development"!==process.env.NODE_ENV||console.warn('Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78'),null)}}(Q);ae.displayName="StaticImage",ae.propTypes=re,exports.GatsbyImage=Q,exports.LaterHydrator=function(e){var t=e.children;return l.useEffect(function(){Promise.resolve().then(function(){return require("./lazy-hydrate-1b726509.js")})},[]),t},exports.LayoutWrapper=function(t){var r=t.children,a=f(t,q);return s.default.createElement(e.Fragment,null,s.default.createElement(T,h({},a)),r,!1)},exports.MainImage=G,exports.Placeholder=V,exports.StaticImage=ae,exports._extends=h,exports._objectWithoutPropertiesLoose=f,exports.generateImageData=S,exports.getImage=z,exports.getImageData=function(e){var t,r=e.baseUrl,a=e.urlBuilder,i=e.sourceWidth,n=e.sourceHeight,o=e.pluginName,s=void 0===o?"getImageData":o,l=e.formats,u=void 0===l?["auto"]:l,d=e.breakpoints,c=e.options,p=f(e,k);return null!=(t=d)&&t.length||"fullWidth"!==p.layout&&"FULL_WIDTH"!==p.layout||(d=v),S(h({},p,{pluginName:s,generateImageSource:function(e,t,r,i){return{width:t,height:r,format:i,src:a({baseUrl:e,width:t,height:r,options:c,format:i})}},filename:r,formats:u,breakpoints:d,sourceMetadata:{width:i,height:n,format:"auto"}}))},exports.getLowResolutionImageURL=function(e,t){var r;return void 0===t&&(t=20),null==(r=(0,(e=R(e)).generateImageSource)(e.filename,t,Math.round(t/e.aspectRatio),e.sourceMetadata.format||"jpg",e.fit,e.options))?void 0:r.src},exports.getMainProps=function(e,t,r,a,i,o,s,l){var u,d;return void 0===l&&(l={}),null!=s&&s.current&&!("objectFit"in document.documentElement.style)&&(s.current.dataset.objectFit=null!=(u=l.objectFit)?u:"cover",s.current.dataset.objectPosition=""+(null!=(d=l.objectPosition)?d:"50% 50%"),function(e){try{var t=function(){window.objectFitPolyfill(e.current)},r=function(){if(!("objectFitPolyfill"in window))return Promise.resolve(Promise.resolve().then(function(){return n(require("objectFitPolyfill"))})).then(function(){})}();Promise.resolve(r&&r.then?r.then(t):t())}catch(e){return Promise.reject(e)}}(s)),O()||(l=h({height:"100%",left:0,position:"absolute",top:0,transform:"translateZ(0)",transition:"opacity 250ms linear",width:"100%",willChange:"opacity"},l)),h({},r,{loading:a,shouldLoad:e,"data-main-image":"",style:h({},l,{opacity:t?1:0}),onLoad:function(e){if(!t){N(o);var r=e.currentTarget,a=new Image;a.src=r.currentSrc,a.decode?a.decode().catch(function(){}).then(function(){i(!0)}):i(!0)}},ref:s})},exports.getPlaceholderProps=function(e,t,r,a,i,n,o,s){var l={};n&&(l.backgroundColor=n,"fixed"===r?(l.width=a,l.height=i,l.backgroundColor=n,l.position="relative"):("constrained"===r||"fullWidth"===r)&&(l.position="absolute",l.top=0,l.left=0,l.bottom=0,l.right=0)),o&&(l.objectFit=o),s&&(l.objectPosition=s);var u=h({},e,{"aria-hidden":!0,"data-placeholder-image":"",style:h({opacity:t?0:1,transition:"opacity 500ms linear"},l)});return O()||(u.style={height:"100%",left:0,position:"absolute",top:0,width:"100%"}),u},exports.getSrc=function(e){var t,r,a;return null==(t=z(e))||null==(r=t.images)||null==(a=r.fallback)?void 0:a.src},exports.getSrcSet=function(e){var t,r,a;return null==(t=z(e))||null==(r=t.images)||null==(a=r.fallback)?void 0:a.srcSet},exports.withArtDirection=function(e,t){var r,a,i,n=e.images,o=e.placeholder,s=h({},f(e,_),{images:h({},n,{sources:[]}),placeholder:o&&h({},o,{sources:[]})});return t.forEach(function(t){var r,a=t.media,i=t.image;a?(i.layout!==e.layout&&"development"===process.env.NODE_ENV&&console.warn('[gatsby-plugin-image] Mismatched image layout: expected "'+e.layout+'" but received "'+i.layout+'". All art-directed images use the same layout as the default image'),(r=s.images.sources).push.apply(r,i.images.sources.map(function(e){return h({},e,{media:a})}).concat([{media:a,srcSet:i.images.fallback.srcSet}])),s.placeholder&&s.placeholder.sources.push({media:a,srcSet:i.placeholder.fallback})):"development"===process.env.NODE_ENV&&console.warn("[gatsby-plugin-image] All art-directed images passed to must have a value set for `media`. Skipping.")}),(r=s.images.sources).push.apply(r,n.sources),null!=o&&o.sources&&(null==(a=s.placeholder)||(i=a.sources).push.apply(i,o.sources)),s}; //# sourceMappingURL=index.browser-53efc75d.js.map