如何在 Gatsby-plugin-image 中将图像路径作为道具传递给 Gatsby答案

【问题标题】：How to pass a path of image as a prop in Gatsby in Gatsby-plugin-image如何在 Gatsby-plugin-image 中将图像路径作为道具传递给 Gatsby
【发布时间】：2021-05-28 13:43:12
【问题描述】：

我正在尝试将图像的路径作为道具传递给组件

注意：组件和索引页面都可以通过相同的路径访问图像。当我将路径作为道具传递时它不起作用

在下面的代码中，我尝试使用 GatbsyImage 和 StaticImage 标记似乎都失败了

index.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/index.scss';
import Main from  '../Layouts/main';
import ImageOverlay from '../components/ImageOverlay';
import { StaticImage } from "gatsby-plugin-image"

function Home(){
  // Home page images
  return (
    <Main >
    <section className="home_page">
      <ImageOverlay path="../images/home/places/portblair.png"> </ImageOverlay>
    </section>
    </Main>
  )
}

export default Home

组件/ImageOverlay.js

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <GatsbyImage image={path}></GatsbyImage>
          <StaticImage src={path}></StaticImage>
      </div> 
  
    )
}
export default ImageOverlay;

我使用 GatsbyImage 和 StaticImage 只是为了检查

提前感谢您的帮助

【问题讨论】：

标签： gatsby gatsby-image gatsby-plugin

【解决方案1】：

你不能在StaticImage上使用外部props，它是known restriction：

使用StaticImage的限制

传递道具的方式有一些技术限制进入StaticImage。最重要的是，您不能使用任何父级组件的道具。有关详细信息，请参阅Gatsby Image plugin reference guide。如果您发现自己希望可以使用从图像的父级传递的道具src 那么很可能你应该使用动态图像。

并扩展参考指南：

// ⚠️ Doesn't work
export function Logo({ logo }) {
  // You can't use a prop passed into the parent component
  return <StaticImage src={logo}>
}

解决方法，如果要使用StaticImage，就是使用静态方式，直接追加src：

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <StaticImage src={`../images/home/places/portblair.png`}></StaticImage>
      </div> 
  
    )
}
export default ImageOverlay;

如果你想使用GatsbyImage，你需要查询你的图片以获得正确的数据：

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function Home({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

注意：当然，根据您的需要调整 sn-p，但要明白

如果您想使用动态图像，则必须进行 GraphQL 查询以允许 Gatsby 及其转换器解析和解析图像。您可以使用一堆可用的过滤器为您的图像创建一个特定的查询，以及relativePath 和absolutePath，在localhost:8000/___graphql 测试查询。

【讨论】：