Gatsby 知足的+；基于盖茨比图像的算法搜索

我的盖茨比/内容博客正在使用Algolia搜索博客文章。除了显示图像外，一切正常

这是我使用Algolia模板在Contentful中创建的Webhook负载：

{
  "title": "{ /payload/fields/title/en-US}",
  "slug": "{ /payload/fields/slug/en-US}",
  "price": "{ /payload/fields/price/en-US}",
  "category": "{ /payload/fields/category/en-US}",
  "usages": "{ /payload/fields/usages/en-US}",
  "rating": "{ /payload/fields/rating/en-US}",
  "image": "https:{ /payload/fields/image/fields/file/url}"
}

我的algolia查询如下所示：

algolia.js



const contentfulQuery = `
{
    allContentfulStrains {
      nodes {
        id
        title
        price
        category
        image {
          file {
            url
          }
        }
      }
    }
  }
`

function pageToAlgoliaRecords({ id, title, price, image }) {
  return { objectID: id, title, price, image }

}

const queries = [
  {
    query: contentfulQuery,
    transformer: ({ data }) => data.allContentfulStrains.nodes.map(pageToAlgoliaRecords),
  }
]

module.exports = queries

现在，当我输入gatsby build时，algolia接收的数据结构不正确。查看下图。我希望结构是-image:image.url，这样我就可以得到图像的url，并在hit组件中通过它来显示图像

我的问题有问题吗

我真的不知道我做错了什么

---

据我所知，Algolia图像和媒体查询需要使用与相同的数据进行填充，尽管其本身不支持片段。在您的情况下，它看起来像：

image {
  childImageSharp {
    fluid {
      aspectRatio
      src
      srcSet
      sizes
      originalImg
      originalName
    }
  }
}

另一方面，我觉得你的

变压器

不错

检查Algolia的配置时，我意识到所有图像路径都是本地设置的（使用

/static

）。我想Algolia需要用静态资产而不是外部URL填充。尝试在配置中添加

downloadLocal:true

：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `your_space_id`,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        downloadLocal: true,
      },
    },
  ],
}

并使用查询进行分发：

  localFile {
    publicURL
    childImageSharp {
      fluid(maxWidth: 500) {
          aspectRatio
          src
          srcSet
          sizes
          originalImg
          originalName
      }
    }
  }

---

据我所知，尽管Algolia图像和媒体查询本身不支持片段，但需要使用与相同的数据填充它们。在您的情况下，它看起来像：

image {
  childImageSharp {
    fluid {
      aspectRatio
      src
      srcSet
      sizes
      originalImg
      originalName
    }
  }
}

另一方面，我觉得你的

变压器

不错

检查Algolia的配置时，我意识到所有图像路径都是本地设置的（使用

/static

）。我想Algolia需要用静态资产而不是外部URL填充。尝试在配置中添加

downloadLocal:true

：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `your_space_id`,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        downloadLocal: true,
      },
    },
  ],
}

并使用查询进行分发：

  localFile {
    publicURL
    childImageSharp {
      fluid(maxWidth: 500) {
          aspectRatio
          src
          srcSet
          sizes
          originalImg
          originalName
      }
    }
  }

---

我试过你的方法。我将Contentful中的有效负载更改为：“image”：“https:{/payload/fields/image/fields/fluid/src}”，并添加了您的查询，但在Algolia中，它仍然是这样的：我猜问题在于Algolia需要索引静态（下载的）资产。我已经更新了我的答案。所以我添加了

downloadLocal:true

，但错误是：GraphQLError:无法查询类型为“ContentfulStrains”的字段“localFile”。另外，您的有效负载在图像的Contentful中是什么样子的？你在Contentful中使用AlgoliaWebhook吗？我使用的是带有CMS静态图像的标记文件，但想法仍然是一样的。尝试你的GraphiQL游乐场，以获得本地路径。我尝试过你的方法。我将Contentful中的有效负载更改为：“image”：“https:{/payload/fields/image/fields/fluid/src}”，并添加了您的查询，但在Algolia中，它仍然是这样的：我猜问题在于Algolia需要索引静态（下载的）资产。我已经更新了我的答案。所以我添加了

downloadLocal:true

，但错误是：GraphQLError:无法查询类型为“ContentfulStrains”的字段“localFile”。另外，您的有效负载在图像的Contentful中是什么样子的？你在Contentful中使用AlgoliaWebhook吗？我使用的是带有CMS静态图像的标记文件，但想法仍然是一样的。尝试GraphiQL游乐场以获得本地路径。