Gatsby应用程序与Shopify集成，不渲染图像

Question

我正在为Gatsby应用程序开发一个Shopify集成，它在很大程度上是在做它应该做的事情，但它没有像它应该做的那样渲染图像。这是我的React代码。

const ProductTemplate = ({ pageContext }) => {
const { product } = pageContext
return (
  <Layout>
    <h1>{product.title}</h1>
    <div>{product.description}</div>

    <MyMeta
      title="Product Page"
      description="Individual Product"
      image={product.images.originalSrc}
      groups={[
       {
         name: 'shopify',
         order: 1,
       },
      ]}
    />

我的gatsby-node.js包含以下内容

const path = require(`path`)
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// Query for all products in Shopify
const result = await graphql(`
  query {
    allShopifyProduct(sort: { fields: [title] }) {
      edges {
        node {
          title
          shopifyId
          handle
          description
          availableForSale
          images {
            id
            originalSrc
          }
          priceRange {
            maxVariantPrice {
            amount
          }
          minVariantPrice {
            amount
          }
        }
      }
    }
  }
 }
`)

标题和描述显示正常，但图像无法渲染。

originalSrc似乎确实像预期的那样带回了值

在我的graphql浏览器中，如果我使用以下命令进行查询

query MyQuery {
  allShopifyProduct {
    edges {
      node {
        id
        images {
          originalSrc
        }
      }
    }
  }
}

我得到了以下信息

{
"data": {
  "allShopifyProduct": {
  "edges": [
    {
      "node": {
        "id": "Shopify__Product__Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY1NDQ0NTk3MjcwMzg=",
        "images": [
          {
            "originalSrc": "https://cdn.shopify.com/s/files/1/0539/2980/3966/products/longsleeve.jpg?v=1614656756"
          }
        ]
      }
    },
    {
      "node": {
        "id": "Shopify__Product__Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY1NDQzNzczODEwNTQ=",
        "images": [
          {
            "originalSrc": "https://cdn.shopify.com/s/files/1/0539/2980/3966/products/pajamas.jpg?v=1614654661"
          }
        ]
      }
    },
    {
      "node": {
        "id": "Shopify__Product__Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY1NDQ0NTQwMjU0MDY=",
        "images": [
          {
            "originalSrc": "https://cdn.shopify.com/s/files/1/0539/2980/3966/products/shortsleeves.jpg?v=1614656651"
          }
        ]
      }
    },
    {
      "node": {
        "id": "Shopify__Product__Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY1NDQ0NDkxNDI5NzQ=",
        "images": [
          {
            "originalSrc": "https://cdn.shopify.com/s/files/1/0539/2980/3966/products/khakhi.jpg?v=1614656544"
          }
        ]
      }
    }
  ]
 }
 },
 "extensions": {}
}

Answer 1

images返回一个数组，提供要检索/迭代的图像的索引

<MyMeta
      title="Product Page"
      description="Individual Product"
      image={product.images[0].originalSrc}
      groups={[
       {
         name: 'shopify',
         order: 1,
       },
      ]}
    />