如何将图像路径作为道具传递到Gatsby插件图像中的Gatsby中

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

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

在下面的代码中，我尝试使用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
 

从“React”导入React；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“../styles/index.scss”；
从“../Layouts/Main”导入Main；
从“../components/ImageOverlay”导入ImageOverlay；
从“盖茨比插件映像”导入{StaticImage}
函数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;

从“React”导入React；
从“盖茨比插件映像”导入{GatsbyImage，StaticImage}
常量ImageOverlay=（{path}）=>{
返回(
)
}
导出默认图像覆盖；

为了便于检查，我使用了GatsbyImage和StaticImage

---

提前感谢您的帮助

您不能在

StaticImage

上使用外部

道具

，它是：

使用

静态图像的限制

传递道具的方式有一些技术限制 进入

StaticImage

。最重要的是，您不能使用任何父项 组件的道具。有关更多信息，请参阅。如果你发现自己希望你能用 从父级为图像

src

传递的道具，则很可能 应该使用动态图像

以及扩展参考指南：

如果要使用

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]
         )
       }
     }
   }
 }
`

从“盖茨比”导入{graphql}
从“盖茨比插件图像”导入{GatsbyImage，getImage}
函数主（{data}）{
const image=getImage（data.blogPost.avatar）
返回(
{data.blogPost.body}

)
}
export const pageQuery=graphql`
质疑{
blogPost（id:{eq:$id}）{
标题
身体
作者
化身{
childImageSharp{
盖茨比图像数据(
宽度：200
占位符：模糊
格式：[自动、WEBP、AVIF]
)
}
}
}
}
`

注意：当然，根据您的需要调整代码片段，但要了解其中的含义

如果要使用动态图像，则必须进行GraphQL查询，以允许Gatsby及其转换器解析和解析图像。您可以使用一组可用的过滤器以及

relativePath

和

absolutePath

为图像创建特定查询，并在

localhost:8000/\uuuuuuu图形ql

上测试查询

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;

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]
         )
       }
     }
   }
 }
`