amp image

package-lock.json

@@ -15055,6 +15055,21 @@
         }
       }
     },
+    "node-html-parser": {
+      "version": "1.2.20",
+      "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.2.20.tgz",
+      "integrity": "sha512-1fUpYjAducDrrBSE0etRUV1tM+wSFTudmrslMXuk35wL/L29E7e1CLQn4CNzFLnqtYpmDlWhkD6VUloyHA0dwA==",
+      "requires": {
+        "he": "1.1.1"
+      },
+      "dependencies": {
+        "he": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+          "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
+        }
+      }
+    },
     "node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",

package.json

@@ -45,6 +45,7 @@
     "gatsby-transformer-sharp": "^2.5.10",
     "gitalk": "^1.6.2",
     "netlify-cms-app": "^2.12.16",
+    "node-html-parser": "^1.2.20",
     "node-sass": "^4.14.1",
     "preact": "^10.4.6",
     "preact-render-to-string": "^5.1.10",

src/templates/article.amp.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { parse } from 'node-html-parser'
 import { Main } from "../ui/ui"
 import { Grid, Row, Col } from "react-flexbox-grid"
 import SEO from "../components/SEO/SEO"
@@ -15,6 +16,13 @@ const articleTemplateAmp = ({
     },
   },
 }) => {
+  
+  // gatsbyImage to default image
+  const parsedHTML = parse(html, { pre: true })
+  const pictures = [...parsedHTML.querySelectorAll('.gatsby-resp-image-link')]
+  
+  pictures.forEach(picture => picture.parentNode.parentNode.set_content(`<img src="${picture.getAttribute('href')}" alt="${picture.querySelector('.gatsby-resp-image-image').getAttribute('alt')}" height="350" />`))
+
   return (
     <>
       <SEO
@@ -32,7 +40,7 @@ const articleTemplateAmp = ({
         <Grid fluid style={{ maxWidth: 800 }}>
           <Row>
             <Col xs={12}>
-              <Article data={frontmatter} html={html.replace(/loading="[^"]*"/, "")} amp={true} />
+              <Article data={frontmatter} html={parsedHTML.toString().replace(/loading="[^"]*"/, "")} amp={true} />
               <Newsletter />
               <MoreArticles amp={true} />
             </Col>