映射图像数组会导致同一图像在每个实例上重复 [英] Mapping array of images leads to the same image repeating on every instance

问题描述

我正在尝试将数组图像中的对象映射到单独产品页面上的图像库中(来自trapi).出现正确数量的图像，但会在其上重复相同的图像.即使在产品页面上，也不应在其各自的数组中包含该图片.示例- https://imgur.com/a/PKlpofy

Im trying to map an object from an array of arrayed images into an image gallery on separate product pages (coming from strapi). The correct number of images appear but it repeats the same image over them. Even on product pages that shouldn't include that image in their respective array. examples - https://imgur.com/a/PKlpofy

我已经检查了源和图像src链接是否都是同一图像的不同版本.- https://imgur.com/a/968w77b

Ive checked the source and the image src links are all different versions of the same image. - https://imgur.com/a/968w77b

GraphIQL- https://imgur.com/a/HvgMA8r

GraphIQL - https://imgur.com/a/HvgMA8r

任何有关即时通讯出现问题的地方的建议都很棒！请让我知道是否需要更多信息.

Any pointers on where im going wrong would be great! please let me know if you need any more info.

代码-

<div className="image-grid">
                {data.home.galleryImage.map((image, id, caption) => (
                    
                      <Image fluid={image.formats.medium.childImageSharp.fluid} alt="hh" key={id} class="galleryimg" thumbnail/> 
                   
                ))  
                }
                </div>
        </div>

GraphQL查询-

GraphQL query -

export const query = graphql`
      query GetSingleHome($slug: String) {
        home: strapiHomes(slug: { eq: $slug }) {
        galleryImage {
          id 
          formats {
            medium {
              childImageSharp {
               fluid(maxWidth: 400, maxHeight: 250) {
                 ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
        }
      }
    `

推荐答案

您没有正确设置 key 值. image 是可迭代的对象，只是命名 galleryImage 的每个索引的一种方式，因此 id 不能作为 id .

You are not setting properly the key value. image is the iterable object, is just a way of naming each index of your galleryImage so the id, doesn't stand as the id of the image itself.

将其更改为:

<div className="image-grid">
  {data.home.galleryImage.map((image) => (
     <Image fluid={image.formats.medium.childImageSharp.fluid} alt="hh" key={image.id} class="galleryimg" thumbnail/>  
   ))}
</div>

要访问嵌套的图像属性，您需要访问其子属性，例如在 image.formats 中进行的操作，访问 formats 位置的方式，但要使用 image.id .

To access the nested image properties, you need to access its child properties, like the way you do in image.formats, accessing to formats position, but using image.id.

有关更多详细信息，您可以检查 MDN文档.

For further details, you can check the MDN docs.

此外，如果循环正在打印相同的图像，则从Strapi创建数据节点时，内部GraphQL的 id 设置不正确.您可以自定义GraphQL节点架构以添加自定义参数，以使用Gatsby提供的不同API绕过此限制， createRemoteFileNode 应该符合您的要求.

In addition, if the loop is printing the same image, internally the id is not correctly set from GraphQL when created the data node from Strapi. You can customize the GraphQL node schema to add custom parameters in order to bypass this limitation using different APIs provided by Gatsby, createRemoteFileNode should fit your requirements.

 const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
    
    exports.onCreateNode = async ({ node, actions, store, cache }) => {
      const { createNode, createNodeField } = actions;
    
      if (node.internal.type !== null && node.internal.type === "StrapiPortfolio") {
        for (const category of node.category) {
          for (const image of category.images) {
            console.log(image);
            const fileNode = await createRemoteFileNode({
              url: "http://localhost:1337" + image.url,
              store,
              cache,
              createNode,
              createNodeId: (id) => image.id.toString(),
            });
    
            if (fileNode) {
              image.localFile___NODE = fileNode.id;
            }
          }
        }
      }
    };

来源:如何使用Graphql从Strapi查询Gatsby中的多张图像

根据您的数据结构，您可能需要更改循环和其他一些参数.在这种情况下，图像位于 category 节点内，因此必须通过嵌套两个不同的循环来推断图像.

Depending on your data structure, you may need to change the loop and some other parameters. In this case, images are inside a category node so, it has to be inferred by nesting two different loops.

想法是遍历所有图像节点，并添加带有以下内容的 localFile ___ NODE 字段:

The idea is to loop through all your image nodes and add the localFile___NODE field with:

  image.localFile___NODE = fileNode.id;

id 先前是在以下位置创建的:

The id is previously created in:

  createNodeId: (id) => image.id.toString(),

这篇关于映射图像数组会导致同一图像在每个实例上重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！