找不到盖茨比图像

Question

所以我正在忙着创建一个降价博客，但出于某种原因我无法使用图片。

盖茨比-config.js

plugins: [
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: `${__dirname}/src/images/`,
      },
      __key: 'images',
    },
]

图像存储在src/images

blogpost.md

---
title: New Provider
image: ../images/new-provider.jpg
imageMeta:
  attribution:
  attributionLink:
featured: false
---

这是我查询数据的方式

export const query = graphql`
  query PostsByID($slug: String!) {
    mdx(slug: { eq: $slug }) {
      body
      frontmatter {
        title
        authors
        date
        featured
        image
        tags
      }
    }
  }
`;

这是我的 img 元素

<Img alt={title} fluid={image} key={title} />

// I tried this too
<img alt={title} src={image} />

当页面加载时，我只看到我的替代文字，在控制台中我看到 http://localhost:8000/images/new-provider.jpg

Answer 1

要查询图像，您需要 childImageSharp 数据（从 Gatsby 的 sharps 和 transformer 中获取，您已经安装了它们）。

如果正确设置了数据结构和路径，您的 GraphQL 查询应如下所示：

export const query = graphql`
  query PostsByID($slug: String!) {
    mdx(slug: { eq: $slug }) {
      body
      frontmatter {
        title
        authors
        date
        featured
        image {
          childImageSharp {
            fluid(width: 125, height: 125) {
              ...GatsbyImageSharpFluid
            }
          }
        }
        tags
      }
    }
  }
`;

您已经拥有了 Gatsby 图像渲染图像所必须的正确节点和属性。然后你可以使用：

<Img alt={title} fluid={image.childImageSharp.fluid} key={title} />

如果您的 GraphQL 查询无法获取 childImageSharp 节点（在 localhost:8000/___graphql 的 GraphiQL 游乐场中对其进行测试），请检查降价路径的相关性。

找不到盖茨比图像

Gatsby Image Not Found

reactjs

gatsby

gatsby-image

盖茨比-config.js

blogpost.md