0

我正在尝试渲染艺术家形象、姓名、城市和当前团队。我已经尝试了很多方法来完成这项工作，但由于某种原因，我似乎无法得到它。他们查询我使用的在 GraphiQL 浏览器中进行了测试。我将非常感谢对 Gatsby 使用图像的一些见解。我已经阅读了很多次文档，每次我都觉得我越来越近了，但我仍然卡住了。因此，任何人愿意提供的帮助将不胜感激。这是我试图在其中渲染图像的组件：

import React from 'react'
import PropTypes from 'prop-types'
import { StaticImage } from 'gatsby-plugin-image'
import { useStaticQuery, graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'

import { useStyles } from './styles'

const ArtistsPage = ({ data }) => {
  const classes = useStyles()
  const imageData = useStaticQuery(graphql`
    query {
      allFile(filter: { extension: { eq: "jpg" } }) {
        edges {
          node {
            childImageSharp {
              fluid {
                originalName
              }
              gatsbyImageData
              id
            }
          }
        }
      }
    }
  `)

  return (
    <section>
      <article className={classes.artistsBackground}>
        <div className={classes.heroLayoutContainer}>
          <h3 className={classes.title}>MEET THE ARTISTS</h3>

          <StaticImage
            className={classes.heroImage}
            src='../../images/artists/hero-images/hero-image-artists.jpg'
            alt='hero-image-artists'
            placeholder='blurred'
          />
        </div>
      </article>

      <article className={classes.artistsContainer}>
        <div className={classes.flexContainer}>
          {data.allArtistsJson.edges
            .map(({ node }, idx) => {
              return (
                <div className={classes.flexItem} key={idx}>
                  <div>
                    {imageData.allFile.edges.map((id) => {
                      const image = getImage(imageData)
                      return (
                        <GatsbyImage
                          image={image}
                          key={id}
                          alt='artist-image'
                        />
                      )
                    })}
                  </div>
                  <div className={classes.artistCardName}>
                    {`${node.firstName} ${node.lastName}`.toUpperCase()}
                  </div>
                  <div className={classes.artistCardText}>{node.city}</div>
                  <div className={classes.artistCardText}>
                    {node.currentTeam}
                  </div>
                </div>
              )
            })}
        </div>
      </article>
    </section>
  )
}

ArtistsPage.propTypes = {
  firstName: PropTypes.string,
  lastName: PropTypes.string,
  currentTeam: PropTypes.string,
  headshots: PropTypes.string,
  dropdown: PropTypes.string,
  data: PropTypes.array,
}

export default ArtistsPage

这是我的配置文件：

const path = require('path')

module.exports = {
  siteMetadata: {
    title: 'Platform Showcase',
  },
  plugins: [
    'gatsby-plugin-gatsby-cloud',
    // {
    //   resolve: "gatsby-plugin-google-analytics",
    //   options: {
    //     trackingId: "",
    //   },
    // },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/images/icon.png',
      },
    },
    'gatsby-plugin-mdx',
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: './src/images/',
      },
      __key: 'images',
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `headshots`,
        path: `${__dirname}/src/images/artists/headshots`,
      },
      __key: 'headshots',
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: './src/pages/',
      },
      __key: 'pages',
    },
    `gatsby-theme-material-ui`,
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
        components: path.join(__dirname, 'src/components'),
        containers: path.join(__dirname, 'src/containers'),
        helpers: path.join(__dirname, 'src/helpers'),
        images: path.join(__dirname, 'src/images'),
      },
    },
  ],
}

还有我实际的艺术家页面组件：

import React from 'react'
import { graphql } from 'gatsby'
import PropTypes from 'prop-types'

import ArtistsContainer from 'containers/ArtistsContainer'

const Artists = ({ data }) => {
  return <ArtistsContainer data={data} />
}
export const query = graphql`
  query {
    allArtistsJson {
      edges {
        node {
          firstName
          lastName
          currentTeam
          city
        }
      }
      totalCount
    }
  }
`

Artists.propTypes = {
  data: PropTypes.array,
}
export default Artists

我尝试使用的所有图像都位于：images/artists/headshots/

提前感谢您的帮助，我已经转了很多圈，似乎无法获得任何生产力。

4

0 回答 0