使用Gatsby遍历来自Tumblr API的JSON图像

gatsby new my-tumblr-project

npm install gatsby-source-tumblr

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-tumblr",
      options: {
        blogIdentifier: "<YOUR_TUMBLR_BLOG_IDENTIFIER>",
        consumerKey: "<YOUR_TUMBLR_CONSUMER_KEY>",
      },
    },
  ],
};

import React from "react";
import { graphql } from "gatsby";

export const query = graphql`
  query {
    allTumblrPhoto {
      edges {
        node {
          id
          photos {
            original_size {
              url
            }
          }
        }
      }
    }
  }
`;

const ImagesPage = ({ data }) => {
  const images = data.allTumblrPhoto.edges;

  return (
    <div>
      {images.map((image) => (
        <img key={image.node.id} src={image.node.photos[0].original_size.url} alt="Tumblr Image" />
      ))}
    </div>
  );
};

export default ImagesPage;