Socket
Socket
Sign inDemoInstall

gatsby-image

Package Overview
Dependencies
Maintainers
2
Versions
310
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-image - npm Package Compare versions

Comparing version 1.0.38-0 to 1.0.38

fragments.js

446

index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _react = _interopRequireDefault(require("react"));
var _inherits2 = require("babel-runtime/helpers/inherits");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _inherits3 = _interopRequireDefault(_inherits2);
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, _extends2.default)({}, props);
var convertedProps = (0, _extends3.default)({}, props);
if (convertedProps.responsiveResolution) {

@@ -28,3 +42,2 @@ convertedProps.resolutions = convertedProps.responsiveResolution;

}
if (convertedProps.responsiveSizes) {

@@ -36,11 +49,10 @@ convertedProps.sizes = convertedProps.responsiveSizes;

return convertedProps;
}; // Cache if we've seen an image before so we don't both with
};
// 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;

@@ -56,3 +68,3 @@

var io;
var io = void 0;
var listeners = [];

@@ -74,5 +86,3 @@

});
}, {
rootMargin: "200px"
});
}, { rootMargin: "200px" });
}

@@ -89,3 +99,2 @@

var isWebpSupportedCache = null;
var isWebpSupported = function isWebpSupported() {

@@ -97,3 +106,2 @@ if (isWebpSupportedCache !== null) {

var elem = typeof window !== "undefined" ? window.document.createElement("canvas") : {};
if (elem.getContext && elem.getContext("2d")) {

@@ -110,29 +118,29 @@ isWebpSupportedCache = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;

var _props$opacity = props.opacity,
opacity = _props$opacity === void 0 ? "" : _props$opacity,
opacity = _props$opacity === undefined ? "" : _props$opacity,
src = props.src,
srcSet = props.srcSet,
_props$sizes = props.sizes,
sizes = _props$sizes === void 0 ? "" : _props$sizes,
sizes = _props$sizes === undefined ? "" : _props$sizes,
_props$title = props.title,
title = _props$title === void 0 ? "" : _props$title,
title = _props$title === undefined ? "" : _props$title,
_props$alt = props.alt,
alt = _props$alt === void 0 ? "" : _props$alt,
alt = _props$alt === undefined ? "" : _props$alt,
_props$width = props.width,
width = _props$width === void 0 ? "" : _props$width,
width = _props$width === undefined ? "" : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? "" : _props$height,
height = _props$height === undefined ? "" : _props$height,
_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 === 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;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"]);
return _react.default.createElement("img", (0, _extends2.default)({}, otherProps, {
otherProps = (0, _objectWithoutProperties3.default)(props, ["style", "onLoad"]);
return _react2.default.createElement("img", (0, _extends3.default)({}, otherProps, {
onLoad: onLoad,
style: {
style: (0, _extends3.default)({
position: "absolute",

@@ -142,4 +150,2 @@ top: 0,

transition: "opacity 0.5s",
transitionDelay: transitionDelay,
opacity: opacity,
width: "100%",

@@ -149,3 +155,3 @@ height: "100%",

objectPosition: "center"
}
}, style)
}));

@@ -155,23 +161,22 @@ };

Img.propTypes = {
opacity: _propTypes.default.number,
transitionDelay: _propTypes.default.string,
onLoad: _propTypes.default.func
style: _propTypes2.default.object,
onLoad: _propTypes2.default.func
};
var Image =
/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(Image, _React$Component);
var Image = function (_React$Component) {
(0, _inherits3.default)(Image, _React$Component);
function Image(props) {
var _this;
(0, _classCallCheck3.default)(this, Image);
_this = _React$Component.call(this, props) || this; // If this browser doesn't support the IntersectionObserver API
// 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; // If this image has already been loaded before then we can assume it's
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.
var seenBefore = inImageCache(props);

@@ -183,5 +188,5 @@

IOSupported = true;
} // Always don't render image while server rendering
}
// Always don't render image while server rendering
if (typeof window === "undefined") {

@@ -197,9 +202,8 @@ isVisible = false;

};
_this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this));
_this.handleRef = _this.handleRef.bind(_this);
return _this;
}
var _proto = Image.prototype;
_proto.handleRef = function handleRef(ref) {
Image.prototype.handleRef = function handleRef(ref) {
var _this2 = this;

@@ -209,6 +213,3 @@

listenToIntersections(ref, function () {
_this2.setState({
isVisible: true,
imgLoaded: false
});
_this2.setState({ isVisible: true, imgLoaded: false });
});

@@ -218,3 +219,3 @@ }

_proto.render = function render() {
Image.prototype.render = function render() {
var _this3 = this;

@@ -228,3 +229,5 @@

_convertProps$style = _convertProps.style,
style = _convertProps$style === void 0 ? {} : _convertProps$style,
style = _convertProps$style === undefined ? {} : _convertProps$style,
_convertProps$imgStyl = _convertProps.imgStyle,
imgStyle = _convertProps$imgStyl === undefined ? {} : _convertProps$imgStyl,
sizes = _convertProps.sizes,

@@ -235,4 +238,3 @@ resolutions = _convertProps.resolutions,

var bgColor;
var bgColor = void 0;
if (typeof backgroundColor === "boolean") {

@@ -244,76 +246,92 @@ bgColor = "lightgray";

var imagePlaceholderStyle = (0, _extends3.default)({
opacity: this.state.imgLoaded ? 0 : 1,
transitionDelay: "0.25s"
}, imgStyle);
var imageStyle = (0, _extends3.default)({
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0
}, imgStyle);
if (sizes) {
var image = sizes; // Use webp by default if browser supports it
var image = sizes;
// 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.
}
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,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}), image.tracedSVG && _react.default.createElement(Img, {
alt: alt,
title: title,
src: image.tracedSVG,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}), 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,
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();
}
}), _react.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends2.default)({
// The outer div is necessary to reset the z-index to 0.
return _react2.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"
}
},
_react2.default.createElement(
Tag,
{
className: (className ? className : "") + " gatsby-image-wrapper",
style: (0, _extends3.default)({
position: "relative",
overflow: "hidden",
zIndex: 1
}, style),
ref: this.handleRef
},
_react2.default.createElement(Tag, {
style: {
width: "100%",
paddingBottom: 100 / image.aspectRatio + "%"
}
}),
image.base64 && _react2.default.createElement(Img, {
alt: alt,
title: title
}, image))
}
})));
title: title,
src: image.base64,
style: imagePlaceholderStyle
}),
image.tracedSVG && _react2.default.createElement(Img, {
alt: alt,
title: title,
src: image.tracedSVG,
style: imagePlaceholderStyle
}),
bgColor && _react2.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 && _react2.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();
}
}),
_react2.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends3.default)({ alt: alt, title: title }, image))
}
})
)
);
}

@@ -323,3 +341,3 @@

var _image = resolutions;
var divStyle = (0, _extends2.default)({
var divStyle = (0, _extends3.default)({
position: "relative",

@@ -335,68 +353,75 @@ 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.
}
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,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.35s"
}), _image.tracedSVG && _react.default.createElement(Img, {
alt: alt,
title: title,
src: _image.tracedSVG,
opacity: !this.state.imgLoaded ? 1 : 0,
transitionDelay: "0.25s"
}), 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,
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
onLoad: function onLoad() {
_this3.setState({
imgLoaded: true
});
_this3.props.onLoad && _this3.props.onLoad();
}
}), _react.default.createElement("noscript", {
dangerouslySetInnerHTML: {
__html: noscriptImg((0, _extends2.default)({
// The outer div is necessary to reset the z-index to 0.
return _react2.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"
}
},
_react2.default.createElement(
Tag,
{
className: (className ? className : "") + " gatsby-image-wrapper",
style: divStyle,
ref: this.handleRef
},
_image.base64 && _react2.default.createElement(Img, {
alt: alt,
title: title,
src: _image.base64,
style: imagePlaceholderStyle
}),
_image.tracedSVG && _react2.default.createElement(Img, {
alt: alt,
title: title,
src: _image.tracedSVG,
style: imagePlaceholderStyle
}),
bgColor && _react2.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 && _react2.default.createElement(Img, {
alt: alt,
title: title,
width: _image.width,
height: _image.height
}, _image))
}
})));
height: _image.height,
srcSet: _image.srcSet,
src: _image.src,
style: imageStyle,
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))
}
})
)
);
}

@@ -408,3 +433,3 @@

return Image;
}(_react.default.Component);
}(_react2.default.Component);

@@ -416,20 +441,21 @@ Image.defaultProps = {

};
Image.propTypes = {
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,
position: _propTypes.default.string,
backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
onLoad: _propTypes.default.func,
Tag: _propTypes.default.string
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,
imgStyle: _propTypes2.default.object,
position: _propTypes2.default.string,
backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
onLoad: _propTypes2.default.func,
Tag: _propTypes2.default.string
};
var _default = Image;
exports.default = _default;
exports.default = Image;
{
"name": "gatsby-image",
"description": "Lazy-loading React image component with optional support for the blur-up effect.",
"version": "1.0.38-0",
"version": "1.0.38",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",

@@ -10,8 +10,7 @@ "bugs": {

"dependencies": {
"@babel/runtime": "^7.0.0-beta.38",
"babel-runtime": "^6.26.0",
"prop-types": "^15.6.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.38",
"@babel/core": "^7.0.0-beta.38",
"babel-cli": "^6.26.0",
"cross-env": "^5.0.5"

@@ -18,0 +17,0 @@ },

@@ -253,7 +253,8 @@ # gatsby-image

| `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 |
| `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. |
| `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. |

@@ -260,0 +261,0 @@ | `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc