Question

我想做类似以下的事情，以便可以动态获得盖茨比图像：

Pane {
  implicitHeight: contentItem.childrenRect.height
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.bottomMargin: 20
  padding: 10
  background: Rectangle { anchors.fill: parent; color: "gray";}
  MouseArea {
    anchors.fill: parent
    onClicked: {
      console.log("Executing action on the item")
    }   
  }

但是，我无法弄清楚如何将此查询连接到将获得“ gatsby-astronaut.png”的初始查询，或从带有的子组件执行此查询。尝试此操作时出现此错误：

const image = 'gastby-astronaut.png';

export const imageQuery = graphql`
  { allImageSharp (
    filter: {
      fluid: {
        originalName: {
          regex: "/${image}/"
        }
      }
    }
  ){
  edges { 
    node {
      fluid {
        originalName
      }
    }
  }
}
}
`;

关于动态返回Gatsby图片的正确方法的任何建议吗？

Answer 1

是的，是的，Gatsby通过静态分析从您的页面提取GraphQL查询：它们在实际文件执行之前，将文件作为文本加载，解析并提取查询。这意味着您没有典型的标记模板文字功能。

唯一的过滤方法是通过从createPage调用gatsby-node.js时提供的上下文。即如果您这样做：

exports.createPages = ({ graphql, actions }) =>
  graphql(`some query here`).then(result => {
    actions.createPage({
      path: "/output-path/",
      component: path.resolve(`./src/templates/your_template.jsx`),
      context: { image: result.data.yourImage },
    })
  })

然后您可以在页面查询中执行此操作：

query SomePage($image: String!) {
  allImageSharp (
    filter: {
      fluid: {
        originalName: {
          regex: $slug
        }
      }
    }
  ){
    edges { 
      node {
        fluid {
          originalName
        }
      }
    }
  }
}

Answer 2

这是我想出的一个解决方案……挺活泼的，但是有效：

import PropTypes from 'prop-types';
import React from 'react';
import Img from 'gatsby-image';
import { useStaticQuery, graphql } from 'gatsby';


const Image = ({ imageYouWant }) => {
  const data = useStaticQuery(
    graphql`
      query allTheImagesQuery{
        allImageSharp {
          edges {
            node {
              fluid(maxWidth:1000) {
                ...GatsbyImageSharpFluid
                originalName
              }
            }
          }
        }
      }`,
  );

  const TheImageYouWant = data.allImageSharp.edges
    .filter(edge => edge.node.fluid.originalName === imageYouWant)
    .map(myImage => <Img fluid={myImage.node.fluid} />);

  return (
    <>
      { TheImageYouWant }
    </>
  );
};


Image.propTypes = {
  imageYouWant: PropTypes.string,
};

Image.defaultProps = {
  imageYouWant: '',
};

export default Image;

如何根据PageQuery的结果获取盖茨比图片？

2 个答案: