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

【问题标题】：Gatsby app with Shopify integration not rendering images具有 Shopify 集成的 Gatsby 应用程序不呈现图像
【发布时间】：2021-03-03 05:08:09
【问题描述】：

我正在为 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": {}
}

【问题讨论】：

有什么问题？损坏的图像？你在<MyMeta> 组件中使用gatsby-image 吗？
所以问题只是图像没有显示出来。我应该使用 gatsby-image 而不是 html img 标签吗？
没关系，但我看不到那个代码，这就是我问的原因。 originalSrc 是否被正确检索？
是的。我在帖子中添加了 graphql 响应。
谢谢！我需要知道的唯一剩下的事情是 <MyMeta> 组件来检查你如何打印图像

标签： reactjs shopify gatsby

【解决方案1】：

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

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

【讨论】：