Use GatsbyImage in an article

refs. * gatsby-uc/plugins#422 (comment) * gatsby-uc/gatsby-source-strapi#62 (comment)
iciclize · Jan 7, 2024 · 988d5fe · 988d5fe
1 parent 7bb1f8e
commit 988d5fe
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/.env.production b/.env.production
@@ -1,3 +1,3 @@
-STRAPI_URL=http://localhost:1337
+STRAPI_URL=https://nnyapi.iciclize.net
 IMAGE_BASE_URL=https://nnyapi.iciclize.net
 FEED_IFRAME_URL=https://memos.iciclize.net/u/1
diff --git a/src/templates/article.js b/src/templates/article.js
@@ -53,8 +53,8 @@ const PostTag = styled.li`
   }
 `;
 
-const ArticleTemplate = hoge => {
-  const data = hoge.data;
+const ArticleTemplate = props => {
+  const data = props.data;
 
   const entry = data.strapiArticle;
   const relatedPosts = data.relatedPosts;
@@ -115,6 +115,20 @@ const ArticleTemplate = hoge => {
                   ? uri
                   : `${process.env.IMAGE_BASE_URL}${uri}`
               }
+              components={{
+                img: ({node, ...imgProps}) => {
+                  // console.log(imgProps);
+                  // console.log(entry.content.medias);
+                  const fileIndex = entry.content.medias.findIndex(file => file.url === imgProps.src);
+                  // console.log("fileIndex=", fileIndex);
+                  if (fileIndex >= 0) {
+                    const medium = entry.content.medias[fileIndex];
+                    return (<GatsbyImage image={medium.localFile.childImageSharp.gatsbyImageData} alt={medium.alternativeText} />);
+                  }
+                  // console.log(node);
+                  return <img alt="this is a fallback text" {...imgProps} />;
+                }
+              }}
             >
               {entry.content.data.content}
             </ReactMarkdown>
@@ -176,6 +190,16 @@ export const q = graphql`
             excerpt(format: PLAIN, pruneLength: 100, truncate: true)
           }
         }
+        medias {
+          src
+          localFile {
+            childImageSharp {
+              gatsbyImageData
+            } 
+          }
+          url
+          alternativeText
+        }
       }
       publish_date(formatString: "YYYY-MM-DD")
       update_date(formatString: "YYYY-MM-DD")