使用 GatsbyImage/getImage() 时没有显示我的图像答案

【问题标题】：My images are not being displayed when using GatsbyImage/getImage()使用 GatsbyImage/getImage() 时没有显示我的图像
【发布时间】：2022-01-24 21:47:32
【问题描述】：

我正在尝试从 src/projects/artwork 目录创建一个填充 .png 的画廊。

我正在使用 GraphQl、Gatsby、gatsby-plugin-sharp、gatsby-plugin-sharp

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-transformer-remark`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projects`,
        path: `${__dirname}/src/projects/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `assets`,
        path: `${__dirname}/assets/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `artwork`,
        path: `${__dirname}/src/projects/artwork/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `screenshots`,
        path: `${__dirname}/src/screenshots/`,
      },
    },
    
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaults: {},
        failOnError: true,
        base64Width: 20,
        forceBase64Format: `png`,
        useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
        stripMetadata: true,
        defaultQuality: 100,
      },
    }
  ]
}

ArtworkPanel.js

import React from 'react';
import {useStaticQuery,graphql} from "gatsby";
import {GatsbyImage,getImage} from "gatsby-plugin-image";
import "../scss/artworkpanel.scss";

export default function ArtworkPanel(){
    
    const data = useStaticQuery(graphql`
        query artwork {
          artwork: allFile(filter: {base: {regex: "/^artwork-/"}}) {
            nodes {
              id
              childrenImageSharp {
                id
                gatsbyImageData(placeholder: DOMINANT_COLOR, formats: PNG)
              }
            }
          }
        }
    `)
    
    const artpieces = data.artwork.nodes;

    return (<>
        <div className="artworkPanel">
            {artpieces.map(artpiece =>{
                <div className="artwork" key={artpiece.id}>
                    <GatsbyImage className="artpiece"
                       image={getImage(
                          artpiece.childrenImageSharp.gatsbyImageData)
                    }/>
                </div>
            }
                
            )}
        </div>
    </>
    )
}```

在 ArtworkPanel 组件中，当我登录时：


artpieces.forEach((piece)=>{
   console.log(piece)
})
//Object { id: "066a858d-0bdf-5195-b2c2-2a3e24d74f2a", childrenImageSharp: (1) […] }
//Object { id: "e7208062-948f-5bc2-b635-93da713ec09e", childrenImageSharp: (1) […] }

目前只有两张图片。进一步钻探，我得到：

artpieces.forEach((piece)=>{
   console.log(piece.childrenImageSharp[0].gatsbyImageData)
})
//Object{layout:"constrained",backgroundColor:"#080808",images:{…},width:1920,height:1080}
//Object{layout:"constrained",backgroundColor:"#f8f8f8",images:{…},width:1123,height:794}

这就是我难过的地方。为什么图像不会出现在 DOM 中？

return (<>
        <div className="artworkPanel">
            {artpieces.map(artpiece =>{
                <div className="artwork" key={artpiece.id}>
                    <GatsbyImage className="artpiece" image={getImage(artpiece.childrenImageSharp[0].gatsbyImageData)}/>
                </div>
            }
                
            )}
        </div>
    </>
    )

【问题讨论】：

标签： gatsby gatsby-image

【解决方案1】：

getImage 是一个帮助函数（可选），它通过指向父图像节点来清理您的代码。在你的情况下，你应该这样做：

getImage(artpiece)

或直接：

artpiece.childrenImageSharp.gatsbyImageData

两者都应该工作。

应用于您的代码：

<GatsbyImage className="artpiece" image={artpiece.childrenImageSharp[0].gatsbyImageData}/>

注意：可能不需要访问[0] 位置。在您的场景中进行测试。

【讨论】：