reactjs - 具有 Shopify 集成的 Gatsby 应用程序不呈现图像

问题描述

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

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": {}
}

标签： reactjsshopifygatsby

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

reactjs - 具有 Shopify 集成的 Gatsby 应用程序不呈现图像

问题描述

解决方案

推荐阅读