gatsby-image - npm Package Compare versions

Comparing version 1.1.0-alpha.9e381f74 to 1.1.0-alpha.9fe50b00

index.js

@@ -104,3 +104,3 @@ "use strict";
   var _props$opacity = props.opacity,
-      opacity = _props$opacity === void 0 ? "" : _props$opacity,
+      opacity = _props$opacity === void 0 ? "1" : _props$opacity,
       src = props.src,
@@ -119,15 +119,13 @@ srcSet = props.srcSet,
       _props$transitionDela = props.transitionDelay,
-      transitionDelay = _props$transitionDela === void 0 ? "" : _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 === void 0 ? "" : _props$transitionDela2,
-      otherProps = (0, _objectWithoutProperties2.default)(props, ["opacity", "onLoad", "transitionDelay"]);
+      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",
@@ -137,4 +135,2 @@ top: 0,
       transition: "opacity 0.5s",
-      transitionDelay: transitionDelay,
-      opacity: opacity,
       width: "100%",
@@ -144,3 +140,3 @@ height: "100%",
       objectPosition: "center"
-    }
+    }, style)
   }));
@@ -150,4 +146,3 @@ };
 Img.propTypes = {
-  opacity: _propTypes.default.number,
-  transitionDelay: _propTypes.default.string,
+  style: _propTypes.default.object,
   onLoad: _propTypes.default.func
@@ -220,2 +215,4 @@ };
         style = _convertProps$style === void 0 ? {} : _convertProps$style,
+        _convertProps$imgStyl = _convertProps.imgStyle,
+        imgStyle = _convertProps$imgStyl === void 0 ? {} : _convertProps$imgStyl,
         sizes = _convertProps.sizes,
@@ -234,2 +231,10 @@ resolutions = _convertProps.resolutions,
 
+    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) {
@@ -268,4 +273,3 @@ var image = sizes; // Use webp by default if browser supports it
         src: image.base64,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.25s"
+        style: imagePlaceholderStyle
       }), image.tracedSVG && _react.default.createElement(Img, {
@@ -275,4 +279,3 @@ alt: alt,
         src: image.tracedSVG,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.25s"
+        style: imagePlaceholderStyle
       }), bgColor && _react.default.createElement(Tag, {
@@ -296,3 +299,3 @@ title: title,
         sizes: image.sizes,
-        opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+        style: imageStyle,
         onLoad: function onLoad() {
@@ -351,4 +354,3 @@ _this3.state.IOSupported && _this3.setState({
         src: _image.base64,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.35s"
+        style: imagePlaceholderStyle
       }), _image.tracedSVG && _react.default.createElement(Img, {
@@ -358,4 +360,3 @@ alt: alt,
         src: _image.tracedSVG,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.25s"
+        style: imagePlaceholderStyle
       }), bgColor && _react.default.createElement(Tag, {
@@ -377,3 +378,3 @@ title: title,
         src: _image.src,
-        opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+        style: imageStyle,
         onLoad: function onLoad() {
@@ -421,2 +422,3 @@ _this3.setState({
   style: _propTypes.default.object,
+  imgStyle: _propTypes.default.object,
   position: _propTypes.default.string,
@@ -423,0 +425,0 @@ backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

package.json

 {
   "name": "gatsby-image",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
-  "version": "1.1.0-alpha.9e381f74",
+  "version": "1.1.0-alpha.9fe50b00",
   "author": "Kyle Mathews <[e-mail]>",
@@ -26,6 +26,3 @@ "bugs": {
   "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby.git"
-  },
+  "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image",
   "scripts": {
@@ -32,0 +29,0 @@ "build": "babel src --out-dir . --ignore __tests__",

README.md

@@ -246,18 +246,20 @@ # gatsby-image
 
-| 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                                                                           |
-| `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`.                                                             |
+| 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
@@ -264,0 +266,0 @@ `quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.

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

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

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

Improved metrics

Total package byte prevSize

26625

increased by2.39%

Number of package files

6

increased by20%

Lines of code

375

increased by5.63%

Number of lines in readme file

274

increased by0.74%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes