[gatsby-image] Support image loading with JavaScript disabled (#3122)

* [gatsby-image] Support image loading with JavaScript disabled * [gatsby-image] Fix noscript element rendering order * Update index.js * Fix my unfix
gatsbyjs · Dec 13, 2017 · b2a0810 · b2a0810
1 parent dcf6b39
commit b2a0810
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -276,6 +276,17 @@ class Image extends React.Component {
                 }}
               />
             )}
+
+            {/* Show the original image during server-side rendering if JavaScript is disabled */}
+            <noscript>
+              <Img
+                alt={alt}
+                title={title}
+                srcSet={image.srcSet}
+                src={image.src}
+                sizes={image.sizes}
+              />
+            </noscript>
           </div>
         </div>
       )
@@ -374,6 +385,18 @@ class Image extends React.Component {
                 }}
               />
             )}
+
+            {/* Show the original image during server-side rendering if JavaScript is disabled */}
+            <noscript>
+              <Img
+                alt={alt}
+                title={title}
+                width={image.width}
+                height={image.height}
+                srcSet={image.srcSet}
+                src={image.src}
+              />
+            </noscript>
           </div>
         </div>
       )