diff --git a/packages/gatsby-remark-images/.gitignore b/packages/gatsby-remark-images/.gitignore
index dcc20e9f74bf9..d2729f58abceb 100644
--- a/packages/gatsby-remark-images/.gitignore
+++ b/packages/gatsby-remark-images/.gitignore
@@ -1,5 +1,6 @@
/constants.js
/gatsby-browser.js
+/gatsby-ssr.js
/index.js
/__tests__/*
tests
\ No newline at end of file
diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
index b9e98d952adff..f11265487067a 100644
--- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -11,9 +11,8 @@ exports[`it handles goofy nesting properly 1`] = `
>
-
+
"
`;
@@ -54,7 +52,7 @@ exports[`it leaves linked HTML img tags alone 1`] = `
exports[`it leaves single-line linked HTML img tags alone 1`] = `
"
-
+
"
`;
@@ -62,7 +60,7 @@ exports[`it transforms HTML img tags 1`] = `
"
-
+
"
`;
@@ -71,7 +69,7 @@ exports[`it transforms HTML img tags with query strings 1`] = `
"
-
+
"
`;
@@ -94,7 +92,6 @@ exports[`it transforms image references in markdown 1`] = `
>
{
+exports.onRouteUpdate = ({ pluginOptions }) => {
+ const options = Object.assign({}, DEFAULT_OPTIONS, pluginOptions)
+
const imageWrappers = document.querySelectorAll(`.${imageWrapperClass}`)
// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
@@ -19,17 +22,26 @@ exports.onRouteUpdate = () => {
const onImageLoad = () => {
backgroundElement.style.transition = `opacity 0.5s 0.5s`
- backgroundElement.style.opacity = 0
imageElement.style.transition = `opacity 0.5s`
+ onImageComplete()
+ }
+
+ const onImageComplete = () => {
+ backgroundElement.style.opacity = 0
imageElement.style.opacity = 1
+ imageElement.style.color = `inherit`
+ imageElement.style.boxShadow = `inset 0px 0px 0px 400px ${
+ options.backgroundColor
+ }`
imageElement.removeEventListener(`load`, onImageLoad)
+ imageElement.removeEventListener(`error`, onImageComplete)
}
+ imageElement.style.opacity = 0
+ imageElement.addEventListener(`load`, onImageLoad)
+ imageElement.addEventListener(`error`, onImageComplete)
if (imageElement.complete) {
- backgroundElement.style.opacity = 0
- } else {
- imageElement.style.opacity = 0
- imageElement.addEventListener(`load`, onImageLoad)
+ onImageComplete()
}
}
}
diff --git a/packages/gatsby-remark-images/src/gatsby-ssr.js b/packages/gatsby-remark-images/src/gatsby-ssr.js
new file mode 100644
index 0000000000000..f7a8230cea764
--- /dev/null
+++ b/packages/gatsby-remark-images/src/gatsby-ssr.js
@@ -0,0 +1,26 @@
+import React from "react"
+
+const { imageClass } = require(`./constants`)
+
+exports.onRenderBody = ({ setHeadComponents }) => {
+ const style = `
+ .${imageClass} {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ vertical-align: middle;
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: transparent;
+ }`
+ .replace(/\s*\n\s*/g, ``)
+ .replace(/: /g, `:`)
+ .replace(/ \{/g, `{`)
+
+ setHeadComponents([
+ ,
+ ])
+}
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index 17f4037b246d0..8a0dda35261fb 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -1,4 +1,5 @@
const {
+ DEFAULT_OPTIONS,
imageClass,
imageBackgroundClass,
imageWrapperClass,
@@ -24,18 +25,7 @@ module.exports = (
{ files, markdownNode, markdownAST, pathPrefix, getNode, reporter, cache },
pluginOptions
) => {
- const defaults = {
- maxWidth: 650,
- wrapperStyle: ``,
- backgroundColor: `white`,
- linkImagesToOriginal: true,
- showCaptions: false,
- pathPrefix,
- withWebp: false,
- tracedSVG: false,
- }
-
- const options = _.defaults(pluginOptions, defaults)
+ const options = _.defaults(pluginOptions, { pathPrefix }, DEFAULT_OPTIONS)
const findParentLinks = ({ children }) =>
children.some(
@@ -163,26 +153,12 @@ module.exports = (
overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt
)
- const title = node.title ? node.title : ``
-
- const imageStyle = `
- width: 100%;
- height: 100%;
- margin: 0;
- vertical-align: middle;
- position: absolute;
- top: 0;
- left: 0;
- box-shadow: inset 0px 0px 0px 400px ${options.backgroundColor};`.replace(
- /\s*(\S+:)\s*/g,
- `$1`
- )
+ const title = node.title ? node.title : alt
// Create our base image tag
let imageTag = `