在Gatsby/React/Graphql中渲染来自同一阵列的图像和视频

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

const ImageVideoGallery = () => {
  // 使用GraphQL查询获取图像和视频数据
  const data = useStaticQuery(graphql`
    query {
      allMedia {
        nodes {
          id
          url
          type
          title
          description
        }
      }
    }
  `);

  // 遍历数据数组，渲染图像和视频元素
  const mediaNodes = data.allMedia.nodes;
  const renderedMedia = mediaNodes.map((node) => {
    if (node.type === "image") {
      return (
        <div key={node.id}>
          <img src={node.url} alt={node.title} />
          <h3>{node.title}</h3>
          <p>{node.description}</p>
        </div>
      );
    } else if (node.type === "video") {
      return (
        <div key={node.id}>
          <video src={node.url} controls>
            Sorry, your browser doesn't support embedded videos.
          </video>
          <h3>{node.title}</h3>
          <p>{node.description}</p>
        </div>
      );
    }
  });

  return <div>{renderedMedia}</div>;
};

export default ImageVideoGallery;