gatsby-image - npm Package Compare versions

Comparing version 1.1.0-alpha.926cb6da to 1.1.0-alpha.95fcd4af

index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
+exports.default = void 0;
 
-var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _inherits2 = require("babel-runtime/helpers/inherits");
+var _react = _interopRequireDefault(require("react"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _extends2 = require("babel-runtime/helpers/extends");
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // Handle legacy names for image queries.
 var convertProps = function convertProps(props) {
-  var convertedProps = (0, _extends3.default)({}, props);
+  var convertedProps = (0, _extends2.default)({}, props);
+
   if (convertedProps.responsiveResolution) {
@@ -42,2 +28,3 @@ convertedProps.resolutions = convertedProps.responsiveResolution;
   }
+
   if (convertedProps.responsiveSizes) {
@@ -49,10 +36,11 @@ convertedProps.sizes = convertedProps.responsiveSizes;
   return convertedProps;
-};
+}; // Cache if we've seen an image before so we don't both with
+// lazy-loading & fading in on subsequent mounts.
 
-// Cache if we've seen an image before so we don't both with
-// lazy-loading & fading in on subsequent mounts.
+
 var imageCache = {};
+
 var inImageCache = function inImageCache(props) {
-  var convertedProps = convertProps(props);
-  // Find src
+  var convertedProps = convertProps(props); // Find src
+
   var src = convertedProps.sizes ? convertedProps.sizes.src : convertedProps.resolutions.src;
@@ -68,3 +56,3 @@
 
-var io = void 0;
+var io;
 var listeners = [];
@@ -86,3 +74,5 @@
       });
-    }, { rootMargin: "200px" });
+    }, {
+      rootMargin: "200px"
+    });
   }
@@ -99,2 +89,3 @@
 var isWebpSupportedCache = null;
+
 var isWebpSupported = function isWebpSupported() {
@@ -106,2 +97,3 @@ if (isWebpSupportedCache !== null) {
   var elem = typeof window !== "undefined" ? window.document.createElement("canvas") : {};
+
   if (elem.getContext && elem.getContext("2d")) {
@@ -118,31 +110,27 @@ isWebpSupportedCache = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
   var _props$opacity = props.opacity,
-      opacity = _props$opacity === undefined ? "" : _props$opacity,
+      opacity = _props$opacity === void 0 ? "1" : _props$opacity,
       src = props.src,
       srcSet = props.srcSet,
       _props$sizes = props.sizes,
-      sizes = _props$sizes === undefined ? "" : _props$sizes,
+      sizes = _props$sizes === void 0 ? "" : _props$sizes,
       _props$title = props.title,
-      title = _props$title === undefined ? "" : _props$title,
+      title = _props$title === void 0 ? "" : _props$title,
       _props$alt = props.alt,
-      alt = _props$alt === undefined ? "" : _props$alt,
+      alt = _props$alt === void 0 ? "" : _props$alt,
       _props$width = props.width,
-      width = _props$width === undefined ? "" : _props$width,
+      width = _props$width === void 0 ? "" : _props$width,
       _props$height = props.height,
-      height = _props$height === undefined ? "" : _props$height,
+      height = _props$height === void 0 ? "" : _props$height,
       _props$transitionDela = props.transitionDelay,
-      transitionDelay = _props$transitionDela === undefined ? "" : _props$transitionDela;
-
-  return "<img width=" + width + " height=" + height + " src=\"" + src + "\" srcset=\"" + srcSet + "\" alt=\"" + alt + "\" title=\"" + title + "\" sizes=\"" + sizes + "\" style=\"position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:" + transitionDelay + ";opacity:" + opacity + ";width:100%;height:100%;object-fit:cover;objectPosition:center\"/>";
+      transitionDelay = _props$transitionDela === void 0 ? "0.5s" : _props$transitionDela;
+  return "<img width=\"" + width + "\" height=\"" + height + "\" src=\"" + src + "\" srcset=\"" + srcSet + "\" alt=\"" + alt + "\" title=\"" + title + "\" sizes=\"" + sizes + "\" style=\"position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:" + transitionDelay + ";opacity:" + opacity + ";width:100%;height:100%;object-fit:cover;object-position:center\"/>";
 };
 
 var Img = function Img(props) {
-  var opacity = props.opacity,
+  var style = props.style,
       onLoad = props.onLoad,
-      _props$transitionDela2 = props.transitionDelay,
-      transitionDelay = _props$transitionDela2 === undefined ? "" : _props$transitionDela2,
-      otherProps = (0, _objectWithoutProperties3.default)(props, ["opacity", "onLoad", "transitionDelay"]);
-
-  return _react2.default.createElement("img", (0, _extends3.default)({}, otherProps, {
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["style", "onLoad"]);
+  return _react.default.createElement("img", (0, _extends2.default)({}, otherProps, {
     onLoad: onLoad,
-    style: {
+    style: (0, _extends2.default)({
       position: "absolute",
@@ -152,4 +140,2 @@ top: 0,
       transition: "opacity 0.5s",
-      transitionDelay: transitionDelay,
-      opacity: opacity,
       width: "100%",
@@ -159,3 +145,3 @@ height: "100%",
       objectPosition: "center"
-    }
+    }, style)
   }));
@@ -165,23 +151,22 @@ };
 Img.propTypes = {
-  opacity: _propTypes2.default.number,
-  transitionDelay: _propTypes2.default.string,
-  onLoad: _propTypes2.default.func
+  style: _propTypes.default.object,
+  onLoad: _propTypes.default.func
 };
 
-var Image = function (_React$Component) {
-  (0, _inherits3.default)(Image, _React$Component);
+var Image =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inheritsLoose2.default)(Image, _React$Component);
 
   function Image(props) {
-    (0, _classCallCheck3.default)(this, Image);
+    var _this;
 
-    // If this browser doesn't support the IntersectionObserver API
+    _this = _React$Component.call(this, props) || this; // If this browser doesn't support the IntersectionObserver API
     // we default to start downloading the image right away.
-    var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
 
     var isVisible = true;
     var imgLoaded = true;
-    var IOSupported = false;
+    var IOSupported = false; // If this image has already been loaded before then we can assume it's
+    // already in the browser cache so it's cheap to just show directly.
 
-    // If this image has already been loaded before then we can assume it's
-    // already in the browser cache so it's cheap to just show directly.
     var seenBefore = inImageCache(props);
@@ -193,5 +178,5 @@
       IOSupported = true;
-    }
+    } // Always don't render image while server rendering
 
-    // Always don't render image while server rendering
+
     if (typeof window === "undefined") {
@@ -207,8 +192,9 @@ isVisible = false;
     };
-
-    _this.handleRef = _this.handleRef.bind(_this);
+    _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
-  Image.prototype.handleRef = function handleRef(ref) {
+  var _proto = Image.prototype;
+
+  _proto.handleRef = function handleRef(ref) {
     var _this2 = this;
@@ -218,3 +204,6 @@
       listenToIntersections(ref, function () {
-        _this2.setState({ isVisible: true, imgLoaded: false });
+        _this2.setState({
+          isVisible: true,
+          imgLoaded: false
+        });
       });
@@ -224,3 +213,3 @@ }
 
-  Image.prototype.render = function render() {
+  _proto.render = function render() {
     var _this3 = this;
@@ -234,8 +223,12 @@
         _convertProps$style = _convertProps.style,
-        style = _convertProps$style === undefined ? {} : _convertProps$style,
+        style = _convertProps$style === void 0 ? {} : _convertProps$style,
+        _convertProps$imgStyl = _convertProps.imgStyle,
+        imgStyle = _convertProps$imgStyl === void 0 ? {} : _convertProps$imgStyl,
         sizes = _convertProps.sizes,
         resolutions = _convertProps.resolutions,
-        backgroundColor = _convertProps.backgroundColor;
+        backgroundColor = _convertProps.backgroundColor,
+        Tag = _convertProps.Tag;
 
-    var bgColor = void 0;
+    var bgColor;
+
     if (typeof backgroundColor === "boolean") {
@@ -247,85 +240,82 @@ bgColor = "lightgray";
 
+    var imagePlaceholderStyle = (0, _extends2.default)({
+      opacity: this.state.imgLoaded ? 0 : 1,
+      transitionDelay: "0.25s"
+    }, imgStyle);
+    var imageStyle = (0, _extends2.default)({
+      opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0
+    }, imgStyle);
+
     if (sizes) {
-      var image = sizes;
+      var image = sizes; // Use webp by default if browser supports it
 
-      // Use webp by default if browser supports it
       if (image.srcWebp && image.srcSetWebp && isWebpSupported()) {
         image.src = image.srcWebp;
         image.srcSet = image.srcSetWebp;
-      }
+      } // The outer div is necessary to reset the z-index to 0.
 
-      // The outer div is necessary to reset the z-index to 0.
-      return _react2.default.createElement(
-        "div",
-        {
-          className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
-          style: {
-            zIndex: 0,
-            // Let users set component to be absolutely positioned.
-            position: style.position === "absolute" ? "initial" : "relative"
-          }
-        },
-        _react2.default.createElement(
-          "div",
-          {
-            className: (className ? className : "") + " gatsby-image-wrapper",
-            style: (0, _extends3.default)({
-              position: "relative",
-              overflow: "hidden",
-              zIndex: 1
-            }, style),
-            ref: this.handleRef
-          },
-          _react2.default.createElement("div", {
-            style: {
-              width: "100%",
-              paddingBottom: 100 / image.aspectRatio + "%"
-            }
-          }),
-          image.base64 && _react2.default.createElement(Img, {
+
+      return _react.default.createElement(Tag, {
+        className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
+        style: {
+          zIndex: 0,
+          // Let users set component to be absolutely positioned.
+          position: style.position === "absolute" ? "initial" : "relative"
+        }
+      }, _react.default.createElement(Tag, {
+        className: (className ? className : "") + " gatsby-image-wrapper",
+        style: (0, _extends2.default)({
+          position: "relative",
+          overflow: "hidden",
+          zIndex: 1
+        }, style),
+        ref: this.handleRef
+      }, _react.default.createElement(Tag, {
+        style: {
+          width: "100%",
+          paddingBottom: 100 / image.aspectRatio + "%"
+        }
+      }), image.base64 && _react.default.createElement(Img, {
+        alt: alt,
+        title: title,
+        src: image.base64,
+        style: imagePlaceholderStyle
+      }), image.tracedSVG && _react.default.createElement(Img, {
+        alt: alt,
+        title: title,
+        src: image.tracedSVG,
+        style: imagePlaceholderStyle
+      }), bgColor && _react.default.createElement(Tag, {
+        title: title,
+        style: {
+          backgroundColor: bgColor,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          opacity: !this.state.imgLoaded ? 1 : 0,
+          transitionDelay: "0.35s",
+          right: 0,
+          left: 0
+        }
+      }), this.state.isVisible && _react.default.createElement(Img, {
+        alt: alt,
+        title: title,
+        srcSet: image.srcSet,
+        src: image.src,
+        sizes: image.sizes,
+        style: imageStyle,
+        onLoad: function onLoad() {
+          _this3.state.IOSupported && _this3.setState({
+            imgLoaded: true
+          });
+          _this3.props.onLoad && _this3.props.onLoad();
+        }
+      }), _react.default.createElement("noscript", {
+        dangerouslySetInnerHTML: {
+          __html: noscriptImg((0, _extends2.default)({
             alt: alt,
-            title: title,
-            src: image.base64,
-            opacity: !this.state.imgLoaded ? 1 : 0,
-            transitionDelay: "0.25s"
-          }),
-          image.tracedSVG && _react2.default.createElement(Img, {
-            alt: alt,
-            title: title,
-            src: image.tracedSVG,
-            opacity: !this.state.imgLoaded ? 1 : 0,
-            transitionDelay: "0.25s"
-          }),
-          bgColor && _react2.default.createElement("div", {
-            title: title,
-            style: {
-              backgroundColor: bgColor,
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              opacity: !this.state.imgLoaded ? 1 : 0,
-              transitionDelay: "0.35s",
-              right: 0,
-              left: 0
-            }
-          }),
-          this.state.isVisible && _react2.default.createElement(Img, {
-            alt: alt,
-            title: title,
-            srcSet: image.srcSet,
-            src: image.src,
-            sizes: image.sizes,
-            opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
-            onLoad: function onLoad() {
-              _this3.state.IOSupported && _this3.setState({ imgLoaded: true });
-              _this3.props.onLoad && _this3.props.onLoad();
-            }
-          }),
-          _react2.default.createElement("noscript", {
-            dangerouslySetInnerHTML: {
-              __html: noscriptImg((0, _extends3.default)({ alt: alt, title: title }, image))
-            }
-          })
-        )
-      );
+            title: title
+          }, image))
+        }
+      })));
     }
@@ -335,3 +325,3 @@
       var _image = resolutions;
-      var divStyle = (0, _extends3.default)({
+      var divStyle = (0, _extends2.default)({
         position: "relative",
@@ -347,77 +337,66 @@ overflow: "hidden",
         delete divStyle.display;
-      }
+      } // Use webp by default if browser supports it
 
-      // Use webp by default if browser supports it
+
       if (_image.srcWebp && _image.srcSetWebp && isWebpSupported()) {
         _image.src = _image.srcWebp;
         _image.srcSet = _image.srcSetWebp;
-      }
+      } // The outer div is necessary to reset the z-index to 0.
 
-      // The outer div is necessary to reset the z-index to 0.
-      return _react2.default.createElement(
-        "div",
-        {
-          className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
-          style: {
-            zIndex: 0,
-            // Let users set component to be absolutely positioned.
-            position: style.position === "absolute" ? "initial" : "relative"
-          }
-        },
-        _react2.default.createElement(
-          "div",
-          {
-            className: (className ? className : "") + " gatsby-image-wrapper",
-            style: divStyle,
-            ref: this.handleRef
-          },
-          _image.base64 && _react2.default.createElement(Img, {
+
+      return _react.default.createElement(Tag, {
+        className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
+        style: {
+          zIndex: 0,
+          // Let users set component to be absolutely positioned.
+          position: style.position === "absolute" ? "initial" : "relative"
+        }
+      }, _react.default.createElement(Tag, {
+        className: (className ? className : "") + " gatsby-image-wrapper",
+        style: divStyle,
+        ref: this.handleRef
+      }, _image.base64 && _react.default.createElement(Img, {
+        alt: alt,
+        title: title,
+        src: _image.base64,
+        style: imagePlaceholderStyle
+      }), _image.tracedSVG && _react.default.createElement(Img, {
+        alt: alt,
+        title: title,
+        src: _image.tracedSVG,
+        style: imagePlaceholderStyle
+      }), bgColor && _react.default.createElement(Tag, {
+        title: title,
+        style: {
+          backgroundColor: bgColor,
+          width: _image.width,
+          opacity: !this.state.imgLoaded ? 1 : 0,
+          transitionDelay: "0.25s",
+          height: _image.height
+        }
+      }), this.state.isVisible && _react.default.createElement(Img, {
+        alt: alt,
+        title: title,
+        width: _image.width,
+        height: _image.height,
+        srcSet: _image.srcSet,
+        src: _image.src,
+        style: imageStyle,
+        onLoad: function onLoad() {
+          _this3.setState({
+            imgLoaded: true
+          });
+
+          _this3.props.onLoad && _this3.props.onLoad();
+        }
+      }), _react.default.createElement("noscript", {
+        dangerouslySetInnerHTML: {
+          __html: noscriptImg((0, _extends2.default)({
             alt: alt,
             title: title,
-            src: _image.base64,
-            opacity: !this.state.imgLoaded ? 1 : 0,
-            transitionDelay: "0.35s"
-          }),
-          _image.tracedSVG && _react2.default.createElement(Img, {
-            alt: alt,
-            title: title,
-            src: _image.tracedSVG,
-            opacity: !this.state.imgLoaded ? 1 : 0,
-            transitionDelay: "0.25s"
-          }),
-          bgColor && _react2.default.createElement("div", {
-            title: title,
-            style: {
-              backgroundColor: bgColor,
-              width: _image.width,
-              opacity: !this.state.imgLoaded ? 1 : 0,
-              transitionDelay: "0.25s",
-              height: _image.height
-            }
-          }),
-          this.state.isVisible && _react2.default.createElement(Img, {
-            alt: alt,
-            title: title,
             width: _image.width,
-            height: _image.height,
-            srcSet: _image.srcSet,
-            src: _image.src,
-            opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
-            onLoad: function onLoad() {
-              _this3.setState({ imgLoaded: true });
-              _this3.props.onLoad && _this3.props.onLoad();
-            }
-          }),
-          _react2.default.createElement("noscript", {
-            dangerouslySetInnerHTML: {
-              __html: noscriptImg((0, _extends3.default)({
-                alt: alt,
-                title: title,
-                width: _image.width,
-                height: _image.height
-              }, _image))
-            }
-          })
-        )
-      );
+            height: _image.height
+          }, _image))
+        }
+      })));
     }
@@ -429,25 +408,28 @@
   return Image;
-}(_react2.default.Component);
+}(_react.default.Component);
 
 Image.defaultProps = {
   fadeIn: true,
-  alt: ""
+  alt: "",
+  Tag: "div"
 };
-
 Image.propTypes = {
-  responsiveResolution: _propTypes2.default.object,
-  responsiveSizes: _propTypes2.default.object,
-  resolutions: _propTypes2.default.object,
-  sizes: _propTypes2.default.object,
-  fadeIn: _propTypes2.default.bool,
-  title: _propTypes2.default.string,
-  alt: _propTypes2.default.string,
-  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), // Support Glamor's css prop.
-  outerWrapperClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-  style: _propTypes2.default.object,
-  position: _propTypes2.default.string,
-  backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
-  onLoad: _propTypes2.default.func
+  responsiveResolution: _propTypes.default.object,
+  responsiveSizes: _propTypes.default.object,
+  resolutions: _propTypes.default.object,
+  sizes: _propTypes.default.object,
+  fadeIn: _propTypes.default.bool,
+  title: _propTypes.default.string,
+  alt: _propTypes.default.string,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  // Support Glamor's css prop.
+  outerWrapperClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  style: _propTypes.default.object,
+  imgStyle: _propTypes.default.object,
+  position: _propTypes.default.string,
+  backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  onLoad: _propTypes.default.func,
+  Tag: _propTypes.default.string
 };
-
-exports.default = Image;
+var _default = Image;
+exports.default = _default;

package.json

 {
   "name": "gatsby-image",
-  "version": "1.1.0-alpha.926cb6da",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
-  "main": "index.js",
-  "scripts": {
-    "build": "babel src --out-dir . --ignore __tests__",
-    "watch": "babel -w src --out-dir . --ignore __tests__",
-    "prepublish": "cross-env NODE_ENV=production npm run build"
+  "version": "1.1.0-alpha.95fcd4af",
+  "author": "Kyle Mathews <[e-mail]>",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0-beta.42",
+    "prop-types": "^15.6.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.42",
+    "@babel/core": "^7.0.0-beta.42",
+    "cross-env": "^5.1.4"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme",
   "keywords": [
@@ -16,12 +24,10 @@ "gatsby",
   ],
-  "author": "Kyle Mathews <[e-mail]>",
   "license": "MIT",
-  "dependencies": {
-    "babel-runtime": "^6.26.0",
-    "prop-types": "^15.6.0"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "cross-env": "^5.0.5"
+  "main": "index.js",
+  "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production npm run build",
+    "watch": "babel -w src --out-dir . --ignore __tests__"
   }
 }

README.md

@@ -9,3 +9,5 @@ # gatsby-image
 capabilities with advanced image loading techniques to easily and completely
-optimize image loading for your sites.
+optimize image loading for your sites. `gatsby-image` uses
+[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
+to power its image transformations.
 
@@ -170,4 +172,8 @@ _Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's
 * `GatsbyContentfulResolutions_noBase64`
+* `GatsbyContentfulResolutions_withWebp`
+* `GatsbyContentfulResolutions_withWebp_noBase64`
 * `GatsbyContentfulSizes`
 * `GatsbyContentfulSizes_noBase64`
+* `GatsbyContentfulSizes_withWebp`
+* `GatsbyContentfulSizes_withWebp_noBase64`
 
@@ -242,16 +248,23 @@ ### gatsby-source-datocms
 
-| Name                    | Type             | Description                                                                                                                 |
-| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `resolutions`           | `object`         | Data returned from the `resolutions` query                                                                                  |
-| `sizes`                 | `object`         | Data returned from the `sizes` query                                                                                        |
-| `fadeIn`                | `bool`           | Defaults to fading in the image on load                                                                                     |
-| `title`                 | `string`         | Passed to the `img` element                                                                                                 |
-| `alt`                   | `string`         | Passed to the `img` element                                                                                                 |
-| `className`             | `string\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop                                                    |
-| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop                                              |
-| `style`                 | `object`         | Spread into the default styles in the wrapper div                                                                           |
-| `position`              | `string`         | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned                                      |
-| `backgroundColor`       | `string\|bool`   | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
-| `onLoad`                | `func`           | A callback that is called when the full-size image has loaded.                                                              |
+| Name                    | Type            | Description                                                                                                                 |
+| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `resolutions`           | `object`        | Data returned from the `resolutions` query                                                                                  |
+| `sizes`                 | `object`        | Data returned from the `sizes` query                                                                                        |
+| `fadeIn`                | `bool`          | Defaults to fading in the image on load                                                                                     |
+| `title`                 | `string`        | Passed to the `img` element                                                                                                 |
+| `alt`                   | `string`        | Passed to the `img` element                                                                                                 |
+| `className`             | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop                                                |
+| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop                                          |
+| `style`                 | `object`        | Spread into the default styles in the wrapper element                                                                       |
+| `imgStyle`              | `object`        | Spread into the default styles for the actual `img` element                                                                 |
+| `position`              | `string`        | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned                                      |
+| `backgroundColor`       | `string|bool`   | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
+| `onLoad`                | `func`          | A callback that is called when the full-size image has loaded.                                                              |
+| `Tag`                   | `string`        | Which HTML tag to use for wrapping elements. Defaults to `div`.                                                             |
 
+## Image processing arguments
+
+[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like
+`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.
+
 ## Some other stuff to be aware of
@@ -258,0 +271,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26625

increased by3.05%

Number of package files

6

increased by20%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

274

increased by4.98%

Worsened metrics

Dev dependency count

3

increased by50%

Lines of code

375

decreased by-0.27%

Dependency changes

• + Added@babel/runtime@^7.0.0-beta.42

• + Added@babel/runtime@7.26.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedbabel-runtime@^6.26.0

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedregenerator-runtime@0.11.1(transitive)

• Updatedprop-types@^15.6.1