如何在 Gatsby-plugin-image 中将图像路径作为 Gatsby 中的 prop 传递

Question

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

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

在下面的代码中，我尝试使用 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 以防万一进行检查

感谢您提前的帮助

Answer 1

您不能在

props

上使用外部

StaticImage

，这是一个 已知的限制:

使用限制

StaticImage

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

StaticImage

。最重要的是，你不能使用任何父级 组件的 props。欲了解更多信息，请参阅 Gatsby 图片 插件参考指南。如果您发现自己希望可以使用 prop 从父级传递给图像

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

注意：当然，请根据您的需要调整代码片段，但要了解想法

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

relativePath

和

absolutePath

为您的图像创建特定查询，在

localhost:8000/___graphql

测试查询。

Answer 2

虽然您无法将

src

的

StaticImage

作为来自父组件的字符串传递，但您仍然可以传递

StaticImage

:

组件

…
const ImageOverlay = ({staticImage}) =>{
  return <div>
    {staticImage('myClass')}
  </div> 
}
export default ImageOverlay;

家长（消费者）

…
const ImageOverlay = ({path}) =>{
  return <div>
    <ImageOverlay
      staticImage={className => <StaticImage
        className={className}
        src="../images/home/places/portblair.png"
        alt="Portblair"
    />}
  </div> 
}

Answer 3

有时，当您将图像路径作为道具传递给 GatsbyImage 和 StaticImage 标签的组件时。并且没有显示图像有一些原因。

1. 图像路径问题。

my-gatsby-project/
│
├── src/
│   ├── components/
│   │   ├── Image_overlay/
│   │       ├── ImageOverlay.js
│   │       └── (other components...)
│   │
│   ├── images/
│   │   ├── image.jpg
│   │   └── (other images...)
│   │
│   ├── pages/
│   │   ├── index.js
│   │   └── (other pages...)
│   │
│   └── (other project files...)
│
├── gatsby-config.js
├── package.json
├── (other project files...)

当您在 src/pages/index.js 中使用图像时，您将使用图像路径作为

../images/image.jpg 

在 ImageOverlay.js 文件中，您将使用 as

../../images/image.jpg 

如果您在项目中使用绝对路径，则可以解决这个问题，然后在这两个文件中您将能够通过此路径访问图像

images/image.jpg 

2. 您不能在 StaticImage 上使用 props，因为存在一些技术限制。关于这些限制，您可以阅读this

如果您从数据库获取图像作为查询，那么您可以将其作为道具传递并使用 GatsbyImage 标签在组件中访问它。