无法使用 Gatsby 和 Strapi 渲染我的图像，也尝试了不同的查询

Question

我正在尝试使用 Gatsby 和 Strapi 渲染单个图像，但我无法做到，

这是我当前的 GraphiQL 查询，我找不到本地选项，当我使用 childImageSharp 时，我也没有图像。

export const query = graphql`
  {
    allStrapiProject {
      nodes {
        description
        featured
        github
        id
        slug
        title
        url
        stack {
          id
          title
        }
        image {
          id
        }
      }
    }
  }
`

这是我的 Gatsby 组件

  description,
  title,
  github,
  stack,
  url,
  image,
  index,
  slug,
 }) => {
  return(
     <article className="project">
    <GatsbyImage 
      image={getImage(image)}
      className="project-img"
      alt={title}
     />
    <div className="project-info">
    <span className="project-number">0{index + 1}.</span>
    <Link to={`/rpojects/${slug}`} className="project-slug">
    <h3>{title}</h3>

    </Link>
   <p className="project-desc">{description}</p>
    <div className="project-stack">
      {stack.map(item => {
        return <span key={item.id}>{item.title}</span>
        
      })}
   </div>
    <div className="project-links">
      <a href={github}>
        <FaGithubSquare className="project-icon">
       </FaGithubSquare>
       </a>
      <a href={url}>
        <FaShareSquare className="project-icon">
       </FaShareSquare>
       </a>


    </div>



    </div> 
    </article>
  )
}

export default Project

这是开发中的实际项目的屏幕截图，其他一切正常。

Answer 1

您的问题一针见血：您需要 childImageSharp 或 localFile 个节点（保存图像数据）来显示图像。

你应该寻找类似的东西：

{
  allStrapiProject {
    edges {
      node {
        id
        image {
          publicURL
        }
        multipleImages {
          localFile {
            publicURL
          }
        }
      }
    }
  }
}

否则，你的Strapi配置应该是错误的。

使用 GatsbyImage 组件的实现看起来不错，因为修复了节点，您的代码应该单独工作。

如果您可以提供有关 gatsby-config.js 或 localhost:8000/___graphql 配置的更多详细信息（其中显示所有节点），我可以详细说明我的答案。

记得在每次试验中使用gatsby clean清理缓存。

无法使用 Gatsby 和 Strapi 渲染我的图像，也尝试了不同的查询

Unable to render my Images with Gatsby and Strapi, tried different queries as well

strapi

gatsby