Question

我已经在我的gatsby网站上安装了“ gatsby-transformer-cloudinary”。我已经实现了API集成，并且可以提取它，并且可以在Cloudinary的页面上看到任何单个图像。我只想动态使用该组件，并且需要您的帮助，如何像道具（例如：“ image”）一样动态使用图像名称区域？

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

export default (props) => {
  const data = useStaticQuery(graphql`
    query {
      image: file(name: { eq: "3144_xl-2015" }) {
        cloudinary: childCloudinaryAsset {
          fixed(width: 300) {
            ...CloudinaryAssetFixed
          }
        }
      }
    }
  `)
 

  return (
    <div className="image-example">
      <Image
        fixed={data.image.cloudinary.fixed}
        alt={props.alt}
        title={props.title}
      />
    </div>
  )
}

Answer 1

您使用的是staticQuery（或useStaticQuery钩子，最后它的工作方式完全相同），因为这是它的限制，因此您不能传递变量。从文档中：

StaticQuery不接受变量（因此名称为“ static”），但是可以用于任何组件，包括页面

如果您要使用<Img>中的动态gatsby-image组件，则需要使用page query并传递某种唯一值（例如slug）并对其进行过滤。

可重复使用的盖茨比变压器云图像动态图像源

1 个答案: