正确使用graphQL和gatsby图像的方法

问题描述

我是Gatsby的新手，我很难找到查询图像的正确方法。我见过的所有教程都查询特定的图像名称或相关的博客文章。我从netlify和Markdown文件中获取内容。例如，如果这是索引页的减价文件，我希望能够使用图像字符串img_1:/img/rooftopcommercial.jpg返回指定的图像。内容编辑器将上传具有不同名称的文件，因此我无法将名称硬编码到graphQL查询中。我现在可以使用的解决方案，但是它是hack且效率低下的。

import React from "react"
import PropTypes from "prop-types"

import { graphql,useStaticQuery } from "gatsby"
import Image from "gatsby-image"

function Photo(props) {
  const imgQuery = useStaticQuery(graphql`
    query ImageComponent {
      data: allFile(filter: { relativeDirectory: { eq: "img" } }) {
        edges {
          node {
            base

            childImageSharp {
              id
              fluid(quality: 90,maxWidth: 750,maxHeight: 400) {
                ...GatsbyImageSharpFluid_withWebp
              }

              fixed {
                src
              }
            }
          }
        }
      }
    }
  `)


  const handleImg = contentLink => {
    let path = ""
    let imgData

    imgQuery.data.edges.map(el => {
      path = "/img/" + el.node.base
      if (path === contentLink) {
        imgData = el.node.childImageSharp.fluid
        return imgData
      }
    })
    return imgData
  }

  return (
    <React.Fragment>
      <Image
        fluid={handleImg(props.markdownString)}
        alt="optimized gatsby image"
      />
    </React.Fragment>
  )
}

Photo.propTypes = {
  markdownString: PropTypes.string.isrequired,}

export default Photo

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gatsby-image netlify-cms reactjs reactjs